mirror of
https://github.com/bitwarden/browser
synced 2025-12-11 13:53:34 +00:00
[CL-333] Icon Refresh Feature Branch (#14298)
* [CL-571] Update icons to new fileset and metaphors (#14163) * [CL-518] Convert icons docs to stories (#14299) * [CL-574] Update inline autofill icons (#14379) --------- Co-authored-by: William Martin <contact@willmartian.com>
This commit is contained in:
Vicki League
GitHub
File diff suppressed because it is too large
Load Diff
@@ -12,7 +12,7 @@
|
||||
<i
|
||||
*ngIf="cipher.organizationId"
|
||||
[appA11yTitle]="'shared' | i18n"
|
||||
class="bwi bwi-collection text-muted"
|
||||
class="bwi bwi-collection-shared text-muted"
|
||||
></i>
|
||||
</span>
|
||||
<ng-container slot="secondary">
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
(click)="addCipher()"
|
||||
slot="end"
|
||||
>
|
||||
<i class="bwi bwi-plus-f" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-plus" aria-hidden="true"></i>
|
||||
{{ "new" | i18n }}
|
||||
</button>
|
||||
</popup-header>
|
||||
|
||||
@@ -5,34 +5,34 @@ export const logoLockedIcon =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(#a)"><path fill="#175DDC" d="M12.66.175A.566.566 0 0 0 12.25 0H1.75a.559.559 0 0 0-.409.175.561.561 0 0 0-.175.41v7c.002.532.105 1.06.305 1.554.189.488.444.948.756 1.368.322.42.682.81 1.076 1.163.365.335.75.649 1.152.939.35.248.718.483 1.103.706.385.222.656.372.815.45.16.08.29.141.386.182A.53.53 0 0 0 7 14a.509.509 0 0 0 .238-.055c.098-.043.225-.104.387-.182.162-.079.438-.23.816-.45.378-.222.75-.459 1.102-.707.403-.29.788-.604 1.154-.939a8.435 8.435 0 0 0 1.076-1.163c.312-.42.567-.88.757-1.367a4.19 4.19 0 0 0 .304-1.555v-7a.55.55 0 0 0-.174-.407Z"/><path fill="#fff" d="M7 12.365s4.306-2.18 4.306-4.717V1.5H7v10.865Z"/><circle cx="12.889" cy="12.889" r="4.889" fill="#F8F9FA"/><path fill="#555" d="M11.26 11.717h2.37v-.848c0-.313-.116-.58-.348-.8a1.17 1.17 0 0 0-.838-.332c-.327 0-.606.11-.838.332a1.066 1.066 0 0 0-.347.8v.848Zm3.851.424v2.546a.4.4 0 0 1-.13.3.44.44 0 0 1-.314.124h-4.445a.44.44 0 0 1-.315-.124.4.4 0 0 1-.13-.3V12.14a.4.4 0 0 1 .13-.3.44.44 0 0 1 .315-.124h.148v-.848c0-.542.204-1.008.612-1.397a2.044 2.044 0 0 1 1.462-.583c.568 0 1.056.194 1.463.583.408.39.611.855.611 1.397v.848h.149a.44.44 0 0 1 .315.124.4.4 0 0 1 .13.3Z"/></g><defs><clipPath id="a"><rect width="16" height="16" fill="#fff" rx="2"/></clipPath></defs></svg>';
|
||||
|
||||
export const globeIcon =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"><path fill="#777" fill-rule="evenodd" d="M18.026 17.842c-1.418 1.739-3.517 2.84-5.86 2.84a7.364 7.364 0 0 1-3.431-.848l.062-.15.062-.151.063-.157c.081-.203.17-.426.275-.646.133-.28.275-.522.426-.68.026-.028.101-.075.275-.115.165-.037.376-.059.629-.073.138-.008.288-.014.447-.02.399-.016.847-.034 1.266-.092.314-.044.566-.131.755-.271a.884.884 0 0 0 .352-.555c.037-.2.008-.392-.03-.543-.035-.135-.084-.264-.12-.355l-.01-.03a4.26 4.26 0 0 0-.145-.33c-.126-.264-.237-.497-.288-1.085-.03-.344.09-.73.251-1.138l.089-.22c.05-.123.1-.247.14-.355.064-.171.129-.375.129-.566a1.51 1.51 0 0 0-.134-.569 2.573 2.573 0 0 0-.319-.547c-.246-.323-.635-.669-1.093-.669-.44 0-1.006.169-1.487.368-.246.102-.48.216-.68.33-.192.111-.372.235-.492.359-.93.96-1.48 1.239-1.81 1.258-.277.017-.478-.15-.736-.525a9.738 9.738 0 0 1-.19-.29l-.006-.01a11.568 11.568 0 0 0-.198-.305 2.76 2.76 0 0 0-.521-.6 1.39 1.39 0 0 0-1.088-.314 8.302 8.302 0 0 1 1.987-3.936c.055.342.146.626.272.856.23.42.561.64.926.716.406.086.857-.061 1.26-.216.125-.047.248-.097.372-.147.309-.125.618-.25.947-.341.26-.072.581-.057.959.012.264.049.529.118.8.19l.36.091c.379.094.782.178 1.135.148.374-.032.733-.197.934-.623a.874.874 0 0 0 .024-.752c-.087-.197-.24-.355-.35-.47-.26-.267-.412-.427-.412-.685 0-.125.037-.2.09-.263a.982.982 0 0 1 .303-.211c.059-.03.119-.058.183-.089l.036-.016a3.79 3.79 0 0 0 .236-.118c.047-.026.098-.056.148-.093 1.936.747 3.51 2.287 4.368 4.249a7.739 7.739 0 0 0-.031-.004c-.38-.047-.738-.056-1.063.061-.34.123-.603.368-.817.74-.122.211-.284.43-.463.67l-.095.129c-.207.281-.431.595-.58.92-.15.326-.245.705-.142 1.103.104.397.387.738.837 1.036.099.065.225.112.314.145l.02.008c.108.04.195.074.268.117.07.042.106.08.124.114.017.03.037.087.022.206-.047.376-.069.73-.052 1.034.017.292.071.59.218.809.118.174.12.421.108.786v.01a2.46 2.46 0 0 0 .021.518.809.809 0 0 0 .15.35Zm1.357.059a9.654 9.654 0 0 0 1.62-5.386c0-5.155-3.957-9.334-8.836-9.334-4.88 0-8.836 4.179-8.836 9.334 0 3.495 1.82 6.543 4.513 8.142v.093h.161a8.426 8.426 0 0 0 4.162 1.098c2.953 0 5.568-1.53 7.172-3.882a.569.569 0 0 0 .048-.062l-.004-.003ZM8.152 19.495a43.345 43.345 0 0 1 .098-.238l.057-.142c.082-.205.182-.455.297-.698.143-.301.323-.624.552-.864.163-.172.392-.254.602-.302.219-.05.473-.073.732-.088.162-.01.328-.016.495-.023.386-.015.782-.03 1.168-.084.255-.036.392-.099.461-.15.06-.045.076-.084.083-.12a.534.534 0 0 0-.02-.223 2.552 2.552 0 0 0-.095-.278l-.01-.027a3.128 3.128 0 0 0-.104-.232c-.134-.282-.31-.65-.374-1.381-.046-.533.138-1.063.3-1.472.035-.09.069-.172.1-.249.046-.11.086-.21.123-.31.062-.169.083-.264.083-.312a.812.812 0 0 0-.076-.283 1.867 1.867 0 0 0-.23-.394c-.21-.274-.428-.408-.577-.408-.315 0-.788.13-1.246.32a5.292 5.292 0 0 0-.603.293 1.727 1.727 0 0 0-.347.244c-.936.968-1.641 1.421-2.235 1.457-.646.04-1.036-.413-1.31-.813-.07-.103-.139-.21-.203-.311l-.005-.007c-.064-.101-.125-.197-.188-.29a2.098 2.098 0 0 0-.387-.453.748.748 0 0 0-.436-.18c-.1-.006-.22.005-.365.046a8.707 8.707 0 0 0-.056.992c0 2.957 1.488 5.547 3.716 6.98Zm10.362-2.316.003-.192.002-.046c.01-.305.026-.786-.232-1.169-.036-.054-.082-.189-.096-.444-.014-.243.003-.55.047-.9a1.051 1.051 0 0 0-.105-.649.987.987 0 0 0-.374-.374 2.285 2.285 0 0 0-.367-.166h-.003a1.243 1.243 0 0 1-.205-.088c-.369-.244-.505-.46-.549-.629-.044-.168-.015-.364.099-.61.115-.25.297-.511.507-.796l.089-.12c.178-.239.368-.495.512-.745.152-.263.302-.382.466-.441.18-.065.416-.073.77-.03.142.018.275.04.397.063.274.837.423 1.736.423 2.671a8.45 8.45 0 0 1-1.384 4.665Zm-4.632-12.63a7.362 7.362 0 0 0-1.715-.201c-1.89 0-3.621.716-4.965 1.905.025.54.12.887.24 1.105.13.238.295.34.482.38.2.042.484-.027.905-.188l.328-.13c.32-.13.681-.275 1.048-.377.398-.111.833-.075 1.24 0 .289.053.59.132.871.205l.326.084c.383.094.694.151.932.13.216-.017.326-.092.395-.237.039-.083.027-.114.014-.144-.027-.062-.088-.136-.212-.264l-.043-.044c-.218-.222-.567-.578-.567-1.142 0-.305.101-.547.262-.734.137-.159.308-.267.46-.347Z" clip-rule="evenodd"/></svg>';
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#1B2029" fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10 10-4.477 10-10Zm-7.806 6.4c-.825 1.65-1.688 2.1-2.194 2.1-.507 0-1.369-.45-2.194-2.1-.704-1.407-1.2-3.384-1.291-5.65h6.97c-.09 2.266-.587 4.243-1.291 5.65Zm1.291-7.15h-6.97c.09-2.266.587-4.243 1.291-5.65.825-1.65 1.688-2.1 2.194-2.1.507 0 1.369.45 2.194 2.1.704 1.407 1.2 3.384 1.291 5.65Zm1.501 1.5c-.108 2.928-.847 5.505-1.946 7.19a8.507 8.507 0 0 0 5.427-7.19h-3.48Zm3.481-1.5h-3.48c-.11-2.928-.848-5.505-1.947-7.19a8.507 8.507 0 0 1 5.427 7.19Zm-13.453 0c.108-2.928.847-5.505 1.946-7.19a8.507 8.507 0 0 0-5.427 7.19h3.48Zm-3.481 1.5a8.507 8.507 0 0 0 5.427 7.19c-1.099-1.685-1.838-4.262-1.946-7.19H3.533Z" clip-rule="evenodd"/></svg>';
|
||||
|
||||
export const creditCardIcon =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="23" height="24" viewBox="0 0 23 24" fill="none"><path fill="#868E96" d="M19.05 5.52H4.02a1.589 1.589 0 0 0-1.11.56c-.286.333-.433.77-.413 1.218v9.48c-.02.447.127.884.413 1.217.285.333.684.534 1.11.56h15.024a1.588 1.588 0 0 0 1.113-.558c.286-.333.435-.772.414-1.22v-9.48a1.748 1.748 0 0 0-.412-1.217 1.589 1.589 0 0 0-1.11-.56ZM4.025 6.705h15.023a.53.53 0 0 1 .37.187c.094.111.143.257.136.405v1.067a.497.497 0 0 1-.117.35.458.458 0 0 1-.319.16H3.95a.458.458 0 0 1-.317-.16.496.496 0 0 1-.117-.35V7.297a.583.583 0 0 1 .137-.405.53.53 0 0 1 .37-.187h.004Zm15.023 10.658H4.021a.53.53 0 0 1-.366-.185.581.581 0 0 1-.14-.4v-6.2a.5.5 0 0 1 .118-.35.458.458 0 0 1 .318-.161h15.17a.453.453 0 0 1 .32.161.499.499 0 0 1 .117.35v6.2a.584.584 0 0 1-.138.405.532.532 0 0 1-.37.187v-.007Zm-1.354-2.18h-2.658a.395.395 0 0 0-.248.14.432.432 0 0 0 0 .552.392.392 0 0 0 .248.138h2.662a.395.395 0 0 0 .248-.139.432.432 0 0 0 0-.552.392.392 0 0 0-.248-.138h-.004Z"/></svg>';
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#1B2029" d="M5.75 14.656c0-.535.434-.969.969-.969H8.53a.969.969 0 1 1 0 1.938H6.72a.969.969 0 0 1-.969-.969ZM11.719 13.688a.969.969 0 1 0 0 1.937h3.062a.969.969 0 1 0 0-1.938H11.72Z"/><path fill="#1B2029" fill-rule="evenodd" d="M2 6.6A2.6 2.6 0 0 1 4.6 4h14.8A2.6 2.6 0 0 1 22 6.6v10.3a2.6 2.6 0 0 1-2.6 2.6H4.6A2.6 2.6 0 0 1 2 16.9V6.6Zm2.6-1.1h14.8a1.1 1.1 0 0 1 1.1 1.1v1.275h-17V6.6a1.1 1.1 0 0 1 1.1-1.1Zm15.9 4.958V16.9a1.1 1.1 0 0 1-1.1 1.1H4.6a1.1 1.1 0 0 1-1.1-1.1v-6.442h17Z" clip-rule="evenodd"/></svg>';
|
||||
|
||||
export const idCardIcon =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="23" height="24" viewBox="0 0 23 24" fill="none"><path fill="#868E96" d="M9.465 12.038c.316-.283.544-.664.652-1.091.108-.427.092-.88-.047-1.297a2.145 2.145 0 0 0-.731-1.032 1.91 1.91 0 0 0-1.149-.394 1.909 1.909 0 0 0-1.15.386 2.143 2.143 0 0 0-.737 1.028 2.305 2.305 0 0 0-.055 1.295c.106.428.331.81.646 1.096-.485.22-.913.563-1.249 1a3.641 3.641 0 0 0-.678 1.508 1.005 1.005 0 0 0 .18.796.877.877 0 0 0 .302.257c.117.06.245.091.375.091h4.693c.13 0 .258-.031.375-.091a.882.882 0 0 0 .302-.256 1.015 1.015 0 0 0 .18-.797 3.636 3.636 0 0 0-.672-1.5 3.313 3.313 0 0 0-1.237-1ZM8.184 9.089c.24 0 .474.077.674.22.2.143.355.347.447.586.092.238.115.5.068.754a1.337 1.337 0 0 1-.332.668 1.19 1.19 0 0 1-.62.357c-.236.05-.48.024-.702-.074a1.238 1.238 0 0 1-.544-.48 1.377 1.377 0 0 1-.205-.725c0-.347.128-.678.356-.923.228-.244.536-.382.857-.382l.001-.001Zm2.333 5.742H5.824l-.083-.121c.12-.597.427-1.132.868-1.515a2.378 2.378 0 0 1 1.56-.592c.568 0 1.119.209 1.56.592.442.383.749.917.869 1.515l-.081.121Zm2.76-4.912h2.833a.384.384 0 0 0 .261-.136.445.445 0 0 0 .106-.29.444.444 0 0 0-.106-.29.387.387 0 0 0-.26-.135h-2.835a.387.387 0 0 0-.26.136.443.443 0 0 0-.106.29c0 .107.037.211.105.29a.39.39 0 0 0 .261.135ZM17.337 14h-4.066a.385.385 0 0 0-.261.136.445.445 0 0 0-.106.29c0 .107.038.21.106.29.068.078.16.126.26.135h4.067a.387.387 0 0 0 .261-.136.442.442 0 0 0 .106-.29.444.444 0 0 0-.106-.29.387.387 0 0 0-.26-.135Zm0-2.466h-4.066a.382.382 0 0 0-.28.124.442.442 0 0 0-.116.301c0 .113.042.221.116.3.074.08.175.125.28.125h4.066a.382.382 0 0 0 .28-.124.442.442 0 0 0 .116-.3.442.442 0 0 0-.116-.302.382.382 0 0 0-.28-.124ZM19.44 5.28H3.627c-.3 0-.587.128-.799.356a1.264 1.264 0 0 0-.33.859V17.43c0 .322.119.631.33.859.212.228.5.356.8.356H19.44c.299 0 .586-.128.798-.356.212-.228.331-.537.331-.859V6.495c0-.322-.12-.631-.33-.859a1.091 1.091 0 0 0-.8-.356Zm-.564 12.15H4.19a.544.544 0 0 1-.4-.178.634.634 0 0 1-.165-.43v-9.72a.63.63 0 0 1 .166-.429.547.547 0 0 1 .399-.178h14.77c.099.024.472.14.48.525v9.803a.63.63 0 0 1-.166.429.547.547 0 0 1-.4.178Z"/></svg>';
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#1B2029" d="M13.25 9.313c0-.518.42-.938.938-.938h3.124a.937.937 0 1 1 0 1.875h-3.125a.937.937 0 0 1-.937-.938Zm.938 2.188a.937.937 0 1 0 0 1.875h1.874a.938.938 0 0 0 0-1.875h-1.875ZM10.75 9.625a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0ZM12 14.442c0-.387-.08-.769-.238-1.126-.157-.357-.387-.681-.677-.954s-.635-.49-1.014-.638a3.294 3.294 0 0 0-2.392 0c-.379.148-.724.365-1.014.638-.29.273-.52.597-.677.954-.157.357-.238.74-.238 1.126 0 .446.362.808.809.808h4.632a.809.809 0 0 0 .809-.808Z"/><path fill="#1B2029" fill-rule="evenodd" d="M4.6 4A2.6 2.6 0 0 0 2 6.6v9.8A2.6 2.6 0 0 0 4.6 19h14.8a2.6 2.6 0 0 0 2.6-2.6V6.6A2.6 2.6 0 0 0 19.4 4H4.6Zm14.8 1.5H4.6a1.1 1.1 0 0 0-1.1 1.1v9.8a1.1 1.1 0 0 0 1.1 1.1h14.8a1.1 1.1 0 0 0 1.1-1.1V6.6a1.1 1.1 0 0 0-1.1-1.1Z" clip-rule="evenodd"/></svg>';
|
||||
|
||||
export const lockIcon =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none"><g clip-path="url(#a)"><path fill="#175DDC" d="M8.799 11.633a.68.68 0 0 0-.639.422.695.695 0 0 0-.054.264.682.682 0 0 0 .374.6v1.13a.345.345 0 1 0 .693 0v-1.17a.68.68 0 0 0 .315-.56.695.695 0 0 0-.204-.486.682.682 0 0 0-.485-.2Zm4.554-4.657h-7.11a.438.438 0 0 1-.406-.26A3.81 3.81 0 0 1 5.584 4.3c.112-.435.312-.842.588-1.195A3.196 3.196 0 0 1 7.19 2.25a3.468 3.468 0 0 1 3.225-.059A3.62 3.62 0 0 1 11.94 3.71l.327.59a.502.502 0 1 0 .885-.483l-.307-.552a4.689 4.689 0 0 0-2.209-2.078 4.466 4.466 0 0 0-3.936.185A4.197 4.197 0 0 0 5.37 2.49a4.234 4.234 0 0 0-.768 1.565 4.714 4.714 0 0 0 .162 2.682.182.182 0 0 1-.085.22.173.173 0 0 1-.082.02h-.353a1.368 1.368 0 0 0-1.277.842c-.07.168-.107.348-.109.53v7.1a1.392 1.392 0 0 0 .412.974 1.352 1.352 0 0 0 .974.394h9.117c.363.001.711-.142.97-.4a1.39 1.39 0 0 0 .407-.972v-7.1a1.397 1.397 0 0 0-.414-.973 1.368 1.368 0 0 0-.972-.396Zm.37 8.469a.373.373 0 0 1-.11.26.364.364 0 0 1-.26.107H4.246a.366.366 0 0 1-.26-.107.374.374 0 0 1-.11-.261V8.349a.374.374 0 0 1 .11-.26.366.366 0 0 1 .26-.108h9.116a.366.366 0 0 1 .37.367l-.008 7.097Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M.798.817h16v16h-16z"/></clipPath></defs></svg>';
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#1B2029" d="M10 10a.75.75 0 0 0-.75-.75h-2.5a.75.75 0 0 0 0 1.5h2.5A.75.75 0 0 0 10 10Z"/><path fill="#1B2029" fill-rule="evenodd" d="M4 4a4 4 0 0 1 7.153-2.462.75.75 0 1 1-1.182.924A2.5 2.5 0 0 0 5.5 4v1H13a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h1V4ZM3 6.5a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V7a.5.5 0 0 0-.5-.5H3Z" clip-rule="evenodd"/></svg>';
|
||||
|
||||
export const plusIcon =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="none"><g clip-path="url(#a)"><path fill="#175DDC" fill-rule="evenodd" d="M9.607 7.15h5.35c.322 0 .627.133.847.362a1.213 1.213 0 0 1 .002 1.68c-.221.23-.527.363-.85.363H9.607v5.652c0 .312-.12.613-.336.839a1.176 1.176 0 0 1-1.696.003 1.21 1.21 0 0 1-.34-.842V9.555H1.888a1.173 1.173 0 0 1-.847-.361A1.193 1.193 0 0 1 .7 8.352a1.219 1.219 0 0 1 .336-.838 1.175 1.175 0 0 1 .85-.364h5.349V1.635c0-.31.118-.611.336-.84A1.176 1.176 0 0 1 9.268.795c.222.228.34.533.34.841V7.15Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M.421.421h16v16h-16z"/></clipPath></defs></svg>';
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#1B2029" d="M8 1.006a.75.75 0 0 1 .75.75V7.25h5.517a.75.75 0 0 1 0 1.5H8.75v5.537a.75.75 0 0 1-1.5 0V8.75H1.746a.75.75 0 1 1 0-1.5H7.25V1.756a.75.75 0 0 1 .75-.75Z"/></svg>';
|
||||
|
||||
export const viewCipherIcon =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><g clip-path="url(#a)"><path fill="#175DDC" d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 .113h20v19.773H0z"/></clipPath></defs></svg>';
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#1B2029" d="M20 15.5a.5.5 0 0 0 .5-.5V4a.5.5 0 0 0-.5-.5H9a.5.5 0 0 0-.5.5v7A.75.75 0 0 1 7 11V4a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-7a.75.75 0 0 1 0-1.5h7Z"/><path fill="#1B2029" d="M4 8.5a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-1.25a.75.75 0 0 1 1.5 0V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.25a.75.75 0 0 1 0 1.5H4Z"/><path fill="#1B2029" d="M12 6.75c0 .414.336.75.75.75h2.69l-8.22 8.22a.75.75 0 1 0 1.06 1.06l8.22-8.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0-.75.75Z"/></svg>';
|
||||
|
||||
export const passkeyIcon =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none"><path fill="#6D757E" d="M2.35 12.112a.713.713 0 1 1 0-1.426.713.713 0 0 1 0 1.426Z"/><path fill="#6D757E" fill-rule="evenodd" d="M4.597 7.695a3.5 3.5 0 1 1 3.741 0A5.33 5.33 0 0 1 10.5 9.186c.154.172.29.328.384.461l1.562-.001L14 11.14l-2.188 1.952-.874-.875-.876.875-.874-.875-.876.84-2.613-.003a3.152 3.152 0 0 1-2.634 1.307c-1.729-.036-3.101-1.436-3.064-3.127C.038 9.543 1.469 8.2 3.199 8.237c.098.002.195.009.291.02a6.76 6.76 0 0 1 .296-.181c.257-.149.528-.276.81-.381Zm1.176 1.957 3.952-.004a4.11 4.11 0 0 0-.498-.462 4.452 4.452 0 0 0-2.76-.95c-.647 0-1.262.137-1.817.384a3.12 3.12 0 0 1 1.123 1.032Zm-1.93-4.916a2.625 2.625 0 1 0 5.25 0 2.625 2.625 0 0 0-5.25 0Zm1.407 7.442-.262.366a2.277 2.277 0 0 1-1.904.942C1.819 13.459.85 12.442.876 11.253c.025-1.19 1.04-2.168 2.304-2.141a2.27 2.27 0 0 1 1.86 1.019l.26.396 6.794-.006.619.595-.866.773-.91-.909-.874.875-.863-.862-1.239 1.19-2.711-.005Z" clip-rule="evenodd"/></svg>';
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#1B2029" fill-rule="evenodd" d="M11 3c0 1.026-.514 1.93-1.3 2.472a6.373 6.373 0 0 1 .465.143 5.899 5.899 0 0 1 1.86 1.054c.455.385.836.836 1.125 1.335a.75.75 0 1 1-1.3.75 3.583 3.583 0 0 0-.793-.94 4.4 4.4 0 0 0-1.66-.87 5.089 5.089 0 0 0-3.065.086 4.4 4.4 0 0 0-1.389.784c-.33.28-.596.598-.793.94a.75.75 0 0 1-1.3-.75c.289-.5.67-.95 1.124-1.335a5.899 5.899 0 0 1 1.861-1.054 6.363 6.363 0 0 1 .465-.143A3 3 0 1 1 11 3ZM8 4.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM7.83 14a3.001 3.001 0 1 1 0-2h4.582a.25.25 0 0 1 .156.055l.972.777a.56.56 0 0 1 .046.832L12.41 14.84a.547.547 0 0 1-.824-.059L11 14h-.25l-.6.8a.5.5 0 0 1-.8 0l-.6-.8h-.92ZM4.5 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/></svg>';
|
||||
|
||||
export const circleCheckIcon =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><g clip-path="url(#a)"><path fill="#017E45" d="M8 15.5a8.383 8.383 0 0 1-4.445-1.264A7.627 7.627 0 0 1 .61 10.87a7.063 7.063 0 0 1-.455-4.333 7.368 7.368 0 0 1 2.19-3.84A8.181 8.181 0 0 1 6.438.644a8.498 8.498 0 0 1 4.623.427 7.912 7.912 0 0 1 3.59 2.762A7.171 7.171 0 0 1 16 8c-.002 1.988-.846 3.895-2.345 5.3-1.5 1.406-3.534 2.198-5.655 2.2ZM8 1.437a7.337 7.337 0 0 0-3.889 1.106 6.672 6.672 0 0 0-2.578 2.945 6.182 6.182 0 0 0-.399 3.792 6.448 6.448 0 0 0 1.916 3.36 7.156 7.156 0 0 0 3.584 1.796 7.434 7.434 0 0 0 4.044-.374 6.924 6.924 0 0 0 3.142-2.417A6.275 6.275 0 0 0 15 8c-.002-1.74-.74-3.407-2.053-4.638C11.635 2.131 9.856 1.44 8 1.437Zm-1.351 9.905a.361.361 0 0 1-.245-.094l-2.257-2.07a.326.326 0 0 1-.103-.232c0-.043.009-.085.027-.125a.334.334 0 0 1 .076-.107.366.366 0 0 1 .246-.097c.093 0 .182.033.249.093l1.843 1.687a.166.166 0 0 0 .126.044.17.17 0 0 0 .066-.018.157.157 0 0 0 .052-.041l4.623-5.636a.34.34 0 0 1 .102-.088.375.375 0 0 1 .27-.038.34.34 0 0 1 .216.156.311.311 0 0 1-.033.37L6.93 11.21a.344.344 0 0 1-.112.09.376.376 0 0 1-.141.039l-.03.003h.001Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 .5h16v15H0z"/></clipPath></defs></svg>';
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><g fill="#1B2029" clip-path="url(#a)"><path d="M12.03 6.28a.75.75 0 0 0-1.06-1.06L6.75 9.44 5.03 7.72a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.06 0l4.75-4.75Z"/><path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>';
|
||||
|
||||
export const spinnerIcon =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(#a)"><path fill="#5A6D91" d="M4.869 15.015a.588.588 0 1 0 0-1.177.588.588 0 0 0 0 1.177ZM8.252 16a.588.588 0 1 0 0-1.176.588.588 0 0 0 0 1.176Zm3.683-.911a.589.589 0 1 0 0-1.177.589.589 0 0 0 0 1.177ZM2.43 12.882a.693.693 0 1 0 0-1.387.693.693 0 0 0 0 1.387ZM1.318 9.738a.82.82 0 1 0 0-1.64.82.82 0 0 0 0 1.64Zm.69-3.578a.968.968 0 1 0 0-1.937.968.968 0 0 0 0 1.937ZM4.81 3.337a1.175 1.175 0 1 0 0-2.35 1.175 1.175 0 0 0 0 2.35Zm4.597-.676a1.33 1.33 0 1 0 0-2.661 1.33 1.33 0 0 0 0 2.66Zm4.543 2.954a1.553 1.553 0 1 0 0-3.105 1.553 1.553 0 0 0 0 3.105Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>';
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><g fill="#1B2029" clip-path="url(#a)"><path d="M9.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM14.5 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3ZM11.536 11.536a1.5 1.5 0 1 1 2.12 2.12 1.5 1.5 0 0 1-2.12-2.12ZM9.5 14.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM0 8a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0ZM4.464 13.657a1.5 1.5 0 1 1-2.12-2.121 1.5 1.5 0 0 1 2.12 2.12ZM2.343 2.343a1.5 1.5 0 1 1 2.121 2.121 1.5 1.5 0 0 1-2.12-2.12Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>';
|
||||
|
||||
export const keyIcon =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"><g clip-path="url(#a)"><path fill="#175DDC" d="M21.803 3.035a7.453 7.453 0 0 0-2.427-1.567 7.763 7.763 0 0 0-2.877-.551c-.988 0-1.967.187-2.878.55a7.455 7.455 0 0 0-2.427 1.568A7.193 7.193 0 0 0 9.283 6.23a6.936 6.936 0 0 0-.023 3.675.556.556 0 0 1-.16.549L.656 18.61a.77.77 0 0 0-.233.468l-.415 3.756a.722.722 0 0 0 .04.354.773.773 0 0 0 .203.3.85.85 0 0 0 .697.201l5.141-.855a.832.832 0 0 0 .461-.241.757.757 0 0 0 .211-.458l.108-1.162a.554.554 0 0 1 .17-.35.62.62 0 0 1 .365-.167l1.2-.105a.832.832 0 0 0 .503-.23.756.756 0 0 0 .23-.482l.124-1.326a.361.361 0 0 1 .111-.23.4.4 0 0 1 .24-.108l1.381-.113a.815.815 0 0 0 .501-.225l2.473-2.386a.506.506 0 0 1 .48-.126 7.904 7.904 0 0 0 1.912.235 7.68 7.68 0 0 0 2.846-.539 7.344 7.344 0 0 0 2.402-1.546C23.213 11.905 24 10.069 24 8.155c0-1.914-.787-3.752-2.194-5.122l-.003.002Zm-10.81 7.148a5.496 5.496 0 0 1-.25-3.208 5.677 5.677 0 0 1 1.6-2.835 5.828 5.828 0 0 1 1.902-1.233 6.075 6.075 0 0 1 4.515 0 5.829 5.829 0 0 1 1.902 1.233c1.107 1.073 1.726 2.514 1.726 4.016 0 1.501-.62 2.943-1.726 4.016a5.925 5.925 0 0 1-2.93 1.537 6.135 6.135 0 0 1-3.339-.245.844.844 0 0 0-.85.182l-2.498 2.409a1.124 1.124 0 0 1-.682.308l-1.687.142a.839.839 0 0 0-.503.23.754.754 0 0 0-.23.482l-.105 1.13a.594.594 0 0 1-.181.374.653.653 0 0 1-.39.178l-1.171.1a.832.832 0 0 0-.503.23.755.755 0 0 0-.23.483l-.122 1.313a.474.474 0 0 1-.13.287.518.518 0 0 1-.288.151l-2.66.439a.36.36 0 0 1-.286-.084.314.314 0 0 1-.102-.266l.182-1.758a.724.724 0 0 1 .222-.449l8.636-8.333a.778.778 0 0 0 .215-.39.756.756 0 0 0-.036-.439h-.001Zm6.976-1.226c-.474 0-.938-.134-1.332-.384a2.31 2.31 0 0 1-.884-1.022 2.17 2.17 0 0 1-.137-1.317c.093-.442.321-.848.657-1.166a2.441 2.441 0 0 1 1.228-.624 2.516 2.516 0 0 1 1.386.13 2.37 2.37 0 0 1 1.077.84c.263.374.404.814.404 1.265 0 .605-.253 1.184-.703 1.611-.45.428-1.06.667-1.696.667Zm0-3.56c-.266 0-.527.075-.75.216-.221.14-.394.34-.496.575a1.22 1.22 0 0 0-.077.74c.053.249.18.477.37.657.189.18.43.3.691.35.262.05.533.025.78-.072.246-.097.457-.261.606-.472a1.235 1.235 0 0 0-.168-1.619 1.369 1.369 0 0 0-.954-.376v.002l-.002-.001Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 .308h24v24H0z"/></clipPath></defs></svg>';
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g fill="#1B2029" clip-path="url(#a)"><path d="M15.75 9.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"/><path fill-rule="evenodd" d="M14.5 17a7.473 7.473 0 0 1-3.055-.648L10.75 17v1.5a1 1 0 0 1-1 1h-1.5V21a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3.586a1 1 0 0 1 .293-.707L7.32 11.68A7.5 7.5 0 1 1 14.5 17Zm-5.482-4.896-.261-.86a6 6 0 1 1 3.3 3.738l-.909-.406-1.898 1.772V18h-2.5v2.5H3.5v-2.879l5.518-5.517Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>';
|
||||
|
||||
export const refreshIcon =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"><g clip-path="url(#a)"><path fill="#175DDC" d="M18.383 11.37a.678.678 0 0 0-.496.086.65.65 0 0 0-.291.402 7.457 7.457 0 0 1-2.451 3.912 7.754 7.754 0 0 1-4.328 1.78 7.761 7.761 0 0 1-4.554-.901 7.502 7.502 0 0 1-3.167-3.318c-.025-.064.03-.159.165-.14l1.039.417a.687.687 0 0 0 .51.005.662.662 0 0 0 .365-.346.62.62 0 0 0-.142-.694.64.64 0 0 0-.214-.136l-2.656-1.061a.686.686 0 0 0-.854.31L.065 14.139a.621.621 0 0 0 .31.847.69.69 0 0 0 .639-.033.653.653 0 0 0 .247-.261l.4-.792a.167.167 0 0 1 .124-.077.173.173 0 0 1 .075.01.16.16 0 0 1 .063.04 8.813 8.813 0 0 0 3.29 3.627 9.109 9.109 0 0 0 4.764 1.358c.312 0 .632-.015.961-.044a9.223 9.223 0 0 0 5.065-2.116 8.871 8.871 0 0 0 2.89-4.578.628.628 0 0 0-.274-.656.655.655 0 0 0-.236-.095v.001Zm1.25-5.735a.693.693 0 0 0-.64.033.659.659 0 0 0-.247.262l-.4.79a.166.166 0 0 1-.261.028 8.809 8.809 0 0 0-3.29-3.63 9.113 9.113 0 0 0-4.764-1.36c-.311 0-.631.014-.961.045A9.224 9.224 0 0 0 4.004 3.92a8.863 8.863 0 0 0-2.89 4.58.622.622 0 0 0 .276.658.657.657 0 0 0 .237.094c.17.036.349.005.496-.086a.65.65 0 0 0 .29-.402 7.452 7.452 0 0 1 2.452-3.911 7.764 7.764 0 0 1 4.328-1.781 7.761 7.761 0 0 1 4.553.902 7.508 7.508 0 0 1 3.168 3.317c.023.063-.03.16-.165.138l-1.042-.42a.688.688 0 0 0-.509-.004.666.666 0 0 0-.367.345.622.622 0 0 0 .357.83l2.65 1.06c.156.064.33.067.489.01a.665.665 0 0 0 .365-.318l1.243-2.454a.622.622 0 0 0-.302-.843Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 .421h20v19.773H0z"/></clipPath></defs></svg>';
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#1B2029" fill-rule="evenodd" d="M3.052 10.777a.75.75 0 0 0 1.49.162c.393-3.61 3.514-6.443 7.329-6.443 2.737 0 5.12 1.46 6.39 3.62h-1.993a.75.75 0 0 0 0 1.5h3.981a.75.75 0 0 0 .75-.75V4.883a.75.75 0 1 0-1.5 0v2.38a8.897 8.897 0 0 0-7.628-4.267c-4.566 0-8.343 3.395-8.82 7.78Zm17.89 2.44a.75.75 0 0 0-1.49-.162c-.393 3.61-3.514 6.442-7.329 6.442a7.396 7.396 0 0 1-6.39-3.62h1.996a.75.75 0 0 0 0-1.5H3.747a.75.75 0 0 0-.75.75v3.983a.75.75 0 0 0 1.5 0v-2.376a8.897 8.897 0 0 0 7.626 4.263c4.566 0 8.343-3.395 8.82-7.78Zm-8.19-3.78a.75.75 0 0 0-1.5 0v1.594l-1.497-.49a.75.75 0 0 0-.467 1.425l1.51.494-.942 1.32a.75.75 0 1 0 1.22.871l.925-1.295.925 1.295a.75.75 0 1 0 1.22-.871l-.941-1.32 1.51-.494a.75.75 0 1 0-.467-1.426l-1.497.49V9.438Z" clip-rule="evenodd"/></svg>';
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9">
|
||||
<button
|
||||
class="-tw-ml-1"
|
||||
bitIconButton="bwi-back"
|
||||
bitIconButton="bwi-angle-left"
|
||||
type="button"
|
||||
*ngIf="showBackButton"
|
||||
[title]="'back' | i18n"
|
||||
|
||||
@@ -9,17 +9,17 @@ import * as stories from "./popup-layout.stories";
|
||||
The popup tab navigation component composes together the popup page and the bottom tab navigation
|
||||
footer. This component is intended to be used a level _above_ each extension tab's page code.
|
||||
|
||||
The navigation footer contains the 4 main page links for the browser extension. It uses the Angular
|
||||
router to determine which page is currently active, and style the button appropriately. Clicking on
|
||||
the buttons will navigate to the correct route. The navigation footer has a max-width built in so
|
||||
that the page looks nice when the extension is popped out.
|
||||
The navigation footer renders an array of nav buttons that are passed as an input. It uses the
|
||||
Angular router to determine which page is currently active, and styles the button appropriately.
|
||||
Clicking on the buttons will navigate to the correct route. The navigation footer has a max-width
|
||||
built in so that the page looks nice when the extension is popped out.
|
||||
|
||||
Long button names will be ellipsed.
|
||||
|
||||
Usage example:
|
||||
|
||||
```html
|
||||
<popup-tab-navigation>
|
||||
<popup-tab-navigation [navButtons]="[]">
|
||||
<popup-page></popup-page>
|
||||
</popup-tab-navigation>
|
||||
```
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
BannerModule,
|
||||
ButtonModule,
|
||||
I18nMockService,
|
||||
Icons,
|
||||
IconButtonModule,
|
||||
ItemModule,
|
||||
NoItemsModule,
|
||||
@@ -81,7 +82,7 @@ class VaultComponent {
|
||||
selector: "mock-add-button",
|
||||
template: `
|
||||
<button bitButton size="small" buttonType="primary" type="button">
|
||||
<i class="bwi bwi-plus-f" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-plus" aria-hidden="true"></i>
|
||||
Add
|
||||
</button>
|
||||
`,
|
||||
@@ -405,26 +406,26 @@ const navButtons = (showBerry = false) => [
|
||||
{
|
||||
label: "vault",
|
||||
page: "/tabs/vault",
|
||||
iconKey: "lock",
|
||||
iconKeyActive: "lock-f",
|
||||
icon: Icons.VaultInactive,
|
||||
iconActive: Icons.VaultActive,
|
||||
},
|
||||
{
|
||||
label: "generator",
|
||||
page: "/tabs/generator",
|
||||
iconKey: "generate",
|
||||
iconKeyActive: "generate-f",
|
||||
icon: Icons.GeneratorInactive,
|
||||
iconActive: Icons.GeneratorActive,
|
||||
},
|
||||
{
|
||||
label: "send",
|
||||
page: "/tabs/send",
|
||||
iconKey: "send",
|
||||
iconKeyActive: "send-f",
|
||||
icon: Icons.SendInactive,
|
||||
iconActive: Icons.SendActive,
|
||||
},
|
||||
{
|
||||
label: "settings",
|
||||
page: "/tabs/settings",
|
||||
iconKey: "cog",
|
||||
iconKeyActive: "cog-f",
|
||||
icon: Icons.SettingsInactive,
|
||||
iconActive: Icons.SettingsActive,
|
||||
showBerry: showBerry,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<ul class="tw-flex tw-flex-1 tw-mb-0 tw-p-0">
|
||||
<li *ngFor="let button of navButtons" class="tw-flex-1 tw-list-none tw-relative">
|
||||
<button
|
||||
class="tw-w-full tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 bit-compact:tw-pb-1 tw-pt-3 bit-compact:tw-pt-2 tw-text-sm tw-bg-transparent tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
|
||||
class="tw-w-full tw-flex tw-flex-col tw-items-center tw-px-0.5 tw-py-2 bit-compact:tw-py-1 tw-bg-transparent tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 tw-group/tab-nav-btn hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
|
||||
[ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
|
||||
title="{{ button.label | i18n }}"
|
||||
[routerLink]="button.page"
|
||||
@@ -18,17 +18,12 @@
|
||||
type="button"
|
||||
role="link"
|
||||
>
|
||||
<i
|
||||
*ngIf="!rla.isActive"
|
||||
class="bwi bwi-lg bwi-{{ button.iconKey }}"
|
||||
<bit-icon
|
||||
[icon]="rla.isActive ? button.iconActive : button.icon"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<i
|
||||
*ngIf="rla.isActive"
|
||||
class="bwi bwi-lg bwi-{{ button.iconKeyActive }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="tw-truncate tw-max-w-full">
|
||||
class="tw-leading-3"
|
||||
></bit-icon>
|
||||
<span class="tw-text-sm tw-truncate tw-max-w-full">
|
||||
{{ button.label | i18n }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@@ -4,13 +4,13 @@ import { RouterModule } from "@angular/router";
|
||||
|
||||
import { JslibModule } from "@bitwarden/angular/jslib.module";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { LinkModule } from "@bitwarden/components";
|
||||
import { Icon, IconModule, LinkModule } from "@bitwarden/components";
|
||||
|
||||
export type NavButton = {
|
||||
label: string;
|
||||
page: string;
|
||||
iconKey: string;
|
||||
iconKeyActive: string;
|
||||
icon: Icon;
|
||||
iconActive: Icon;
|
||||
showBerry?: boolean;
|
||||
};
|
||||
|
||||
@@ -18,7 +18,7 @@ export type NavButton = {
|
||||
selector: "popup-tab-navigation",
|
||||
templateUrl: "popup-tab-navigation.component.html",
|
||||
standalone: true,
|
||||
imports: [CommonModule, LinkModule, RouterModule, JslibModule],
|
||||
imports: [CommonModule, LinkModule, RouterModule, JslibModule, IconModule],
|
||||
host: {
|
||||
class: "tw-block tw-h-full tw-w-full tw-flex tw-flex-col",
|
||||
},
|
||||
|
||||
@@ -1,70 +1,60 @@
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { combineLatest, firstValueFrom, map, Observable } from "rxjs";
|
||||
import { Component } from "@angular/core";
|
||||
import { combineLatest, map, Observable, switchMap } from "rxjs";
|
||||
|
||||
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
||||
import { getUserId } from "@bitwarden/common/auth/services/account.service";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { UserId } from "@bitwarden/common/types/guid";
|
||||
import { Icons } from "@bitwarden/components";
|
||||
import { VaultNudgesService } from "@bitwarden/vault";
|
||||
|
||||
import { NavButton } from "../platform/popup/layout/popup-tab-navigation.component";
|
||||
|
||||
@Component({
|
||||
selector: "app-tabs-v2",
|
||||
templateUrl: "./tabs-v2.component.html",
|
||||
})
|
||||
export class TabsV2Component implements OnInit {
|
||||
private activeUserId: UserId | null = null;
|
||||
protected navButtons$: Observable<
|
||||
{
|
||||
label: string;
|
||||
page: string;
|
||||
iconKey: string;
|
||||
iconKeyActive: string;
|
||||
showBerry?: boolean;
|
||||
}[]
|
||||
> = new Observable();
|
||||
export class TabsV2Component {
|
||||
private hasActiveBadges$ = this.accountService.activeAccount$
|
||||
.pipe(getUserId)
|
||||
.pipe(switchMap((userId) => this.vaultNudgesService.hasActiveBadges$(userId)));
|
||||
protected navButtons$: Observable<NavButton[]> = combineLatest([
|
||||
this.configService.getFeatureFlag$(FeatureFlag.PM8851_BrowserOnboardingNudge),
|
||||
this.hasActiveBadges$,
|
||||
]).pipe(
|
||||
map(([onboardingFeatureEnabled, hasBadges]) => {
|
||||
return [
|
||||
{
|
||||
label: "vault",
|
||||
page: "/tabs/vault",
|
||||
icon: Icons.VaultInactive,
|
||||
iconActive: Icons.VaultActive,
|
||||
},
|
||||
{
|
||||
label: "generator",
|
||||
page: "/tabs/generator",
|
||||
icon: Icons.GeneratorInactive,
|
||||
iconActive: Icons.GeneratorActive,
|
||||
},
|
||||
{
|
||||
label: "send",
|
||||
page: "/tabs/send",
|
||||
icon: Icons.SendInactive,
|
||||
iconActive: Icons.SendActive,
|
||||
},
|
||||
{
|
||||
label: "settings",
|
||||
page: "/tabs/settings",
|
||||
icon: Icons.SettingsInactive,
|
||||
iconActive: Icons.SettingsActive,
|
||||
showBerry: onboardingFeatureEnabled && hasBadges,
|
||||
},
|
||||
];
|
||||
}),
|
||||
);
|
||||
constructor(
|
||||
private vaultNudgesService: VaultNudgesService,
|
||||
private accountService: AccountService,
|
||||
private readonly configService: ConfigService,
|
||||
) {}
|
||||
|
||||
async ngOnInit() {
|
||||
this.activeUserId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
|
||||
|
||||
this.navButtons$ = combineLatest([
|
||||
this.configService.getFeatureFlag$(FeatureFlag.PM8851_BrowserOnboardingNudge),
|
||||
this.vaultNudgesService.hasActiveBadges$(this.activeUserId),
|
||||
]).pipe(
|
||||
map(([onboardingFeatureEnabled, hasBadges]) => {
|
||||
return [
|
||||
{
|
||||
label: "vault",
|
||||
page: "/tabs/vault",
|
||||
iconKey: "lock",
|
||||
iconKeyActive: "lock-f",
|
||||
},
|
||||
{
|
||||
label: "generator",
|
||||
page: "/tabs/generator",
|
||||
iconKey: "generate",
|
||||
iconKeyActive: "generate-f",
|
||||
},
|
||||
{
|
||||
label: "send",
|
||||
page: "/tabs/send",
|
||||
iconKey: "send",
|
||||
iconKeyActive: "send-f",
|
||||
},
|
||||
{
|
||||
label: "settings",
|
||||
page: "/tabs/settings",
|
||||
iconKey: "cog",
|
||||
iconKeyActive: "cog-f",
|
||||
showBerry: onboardingFeatureEnabled && hasBadges,
|
||||
},
|
||||
];
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
</bit-item>
|
||||
<bit-item>
|
||||
<a bit-item-content routerLink="/appearance">
|
||||
<i slot="start" class="bwi bwi-eye" aria-hidden="true"></i>
|
||||
<i slot="start" class="bwi bwi-brush" aria-hidden="true"></i>
|
||||
{{ "appearance" | i18n }}
|
||||
<i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<button bitButton size="small" [bitMenuTriggerFor]="itemOptions" buttonType="primary" type="button">
|
||||
<i class="bwi bwi-plus-f" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-plus" aria-hidden="true"></i>
|
||||
{{ "new" | i18n }}
|
||||
</button>
|
||||
<bit-menu #itemOptions>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
*ngIf="collections.length"
|
||||
fullWidth
|
||||
formControlName="collection"
|
||||
placeholderIcon="bwi-collection"
|
||||
placeholderIcon="bwi-collection-shared"
|
||||
[placeholderText]="'collection' | i18n"
|
||||
[options]="collections"
|
||||
>
|
||||
|
||||
@@ -362,7 +362,7 @@ describe("VaultPopupListFiltersService", () => {
|
||||
|
||||
it("sets collection icon", (done) => {
|
||||
service.collections$.subscribe((collections) => {
|
||||
expect(collections.every(({ icon }) => icon === "bwi-collection")).toBeTruthy();
|
||||
expect(collections.every(({ icon }) => icon === "bwi-collection-shared")).toBeTruthy();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -461,7 +461,7 @@ export class VaultPopupListFiltersService {
|
||||
});
|
||||
}),
|
||||
map((collections) =>
|
||||
collections.nestedList.map((c) => this.convertToChipSelectOption(c, "bwi-collection")),
|
||||
collections.nestedList.map((c) => this.convertToChipSelectOption(c, "bwi-collection-shared")),
|
||||
),
|
||||
shareReplay({ refCount: true, bufferSize: 1 }),
|
||||
);
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
type="button"
|
||||
(click)="openAddEditFolderDialog()"
|
||||
>
|
||||
<i class="bwi bwi-plus-f" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-plus" aria-hidden="true"></i>
|
||||
{{ "new" | i18n }}
|
||||
</button>
|
||||
<app-pop-out></app-pop-out>
|
||||
@@ -47,7 +47,7 @@
|
||||
(click)="openAddEditFolderDialog()"
|
||||
data-testid="empty-new-folder-button"
|
||||
>
|
||||
<i class="bwi bwi-plus-f" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-plus" aria-hidden="true"></i>
|
||||
{{ "newFolder" | i18n }}
|
||||
</button>
|
||||
</bit-no-items>
|
||||
|
||||
@@ -14,12 +14,12 @@ export class NavComponent {
|
||||
items: any[] = [
|
||||
{
|
||||
link: "/vault",
|
||||
icon: "bwi-lock-f",
|
||||
icon: "bwi-vault",
|
||||
label: this.i18nService.translate("myVault"),
|
||||
},
|
||||
{
|
||||
link: "/send",
|
||||
icon: "bwi-send-f",
|
||||
icon: "bwi-send",
|
||||
label: "Send",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -110,7 +110,7 @@
|
||||
*ngIf="!(!cipher.edit && editMode)"
|
||||
cdkDragHandle
|
||||
>
|
||||
<i class="bwi bwi-hamburger" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-drag-and-drop" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -519,7 +519,7 @@
|
||||
appA11yTitle="{{ 'importSshKeyFromClipboard' | i18n }}"
|
||||
(click)="importSshKeyFromClipboard()"
|
||||
>
|
||||
<i class="bwi bwi-lg bwi-paste" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-lg bwi-import" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
>
|
||||
<i
|
||||
*ngIf="c.children.length === 0"
|
||||
class="bwi bwi-fw bwi-collection"
|
||||
class="bwi bwi-fw bwi-collection-shared"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
{{ c.node.name }}
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<span class="truncate">{{ c.name }}</span>
|
||||
<ng-container *ngIf="c.organizationId">
|
||||
<i
|
||||
class="bwi bwi-collection text-muted"
|
||||
class="bwi bwi-collection-shared text-muted"
|
||||
title="{{ 'shared' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
|
||||
@@ -105,14 +105,14 @@ export class VaultFilterComponent
|
||||
id: "AllCollections",
|
||||
name: "collections",
|
||||
type: "all",
|
||||
icon: "bwi-collection",
|
||||
icon: "bwi-collection-shared",
|
||||
},
|
||||
[
|
||||
{
|
||||
id: "AllCollections",
|
||||
name: "Collections",
|
||||
type: "all",
|
||||
icon: "bwi-collection",
|
||||
icon: "bwi-collection-shared",
|
||||
},
|
||||
],
|
||||
),
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<ng-container>
|
||||
<bit-breadcrumb
|
||||
*ngFor="let collection of collections"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
[route]="[]"
|
||||
[queryParams]="{ collectionId: collection.id }"
|
||||
queryParamsHandling="merge"
|
||||
@@ -115,7 +115,7 @@
|
||||
id="newItemDropdown"
|
||||
appA11yTitle="{{ 'new' | i18n }}"
|
||||
>
|
||||
<i class="bwi bwi-plus-f" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-plus" aria-hidden="true"></i>
|
||||
{{ "new" | i18n }}<i class="bwi tw-ml-2" aria-hidden="true"></i>
|
||||
</button>
|
||||
<bit-menu #addOptions aria-labelledby="newItemDropdown">
|
||||
@@ -140,7 +140,7 @@
|
||||
<ng-container *ngIf="canCreateCollection">
|
||||
<bit-menu-divider *ngIf="canCreateCipher"></bit-menu-divider>
|
||||
<button type="button" bitMenuItem (click)="addCollection()">
|
||||
<i class="bwi bwi-fw bwi-collection" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-fw bwi-collection-shared" aria-hidden="true"></i>
|
||||
{{ "collection" | i18n }}
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
@@ -117,7 +117,7 @@ export class VaultHeaderComponent {
|
||||
}
|
||||
|
||||
get icon() {
|
||||
return this.filter.collectionId !== undefined ? "bwi-collection" : "";
|
||||
return this.filter.collectionId !== undefined ? "bwi-collection-shared" : "";
|
||||
}
|
||||
|
||||
protected get showBreadcrumbs() {
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
<bit-nav-item
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
[text]="'collections' | i18n"
|
||||
route="vault"
|
||||
*ngIf="canShowVaultTab(organization)"
|
||||
|
||||
@@ -93,7 +93,8 @@
|
||||
<i aria-hidden="true" class="bwi bwi-user"></i> {{ "members" | i18n }}
|
||||
</button>
|
||||
<button type="button" bitMenuItem (click)="edit(g, ModalTabType.Collections)">
|
||||
<i aria-hidden="true" class="bwi bwi-collection"></i> {{ "collections" | i18n }}
|
||||
<i aria-hidden="true" class="bwi bwi-collection-shared"></i>
|
||||
{{ "collections" | i18n }}
|
||||
</button>
|
||||
<button type="button" bitMenuItem (click)="delete(g)">
|
||||
<span class="tw-text-danger"
|
||||
|
||||
@@ -307,7 +307,8 @@
|
||||
<i aria-hidden="true" class="bwi bwi-users"></i> {{ "groups" | i18n }}
|
||||
</button>
|
||||
<button type="button" bitMenuItem (click)="edit(u, memberTab.Collections)">
|
||||
<i aria-hidden="true" class="bwi bwi-collection"></i> {{ "collections" | i18n }}
|
||||
<i aria-hidden="true" class="bwi bwi-collection-shared"></i>
|
||||
{{ "collections" | i18n }}
|
||||
</button>
|
||||
<bit-menu-divider></bit-menu-divider>
|
||||
<button
|
||||
|
||||
@@ -310,7 +310,7 @@ export class AccessSelectorComponent implements ControlValueAccessor, OnInit, On
|
||||
protected itemIcon(item: AccessItemView) {
|
||||
switch (item.type) {
|
||||
case AccessItemType.Collection:
|
||||
return "bwi-collection";
|
||||
return "bwi-collection-shared";
|
||||
case AccessItemType.Group:
|
||||
return "bwi-users";
|
||||
case AccessItemType.Member:
|
||||
|
||||
@@ -48,14 +48,14 @@
|
||||
<bit-option
|
||||
*ngIf="deletedParentName"
|
||||
disabled
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
[value]="deletedParentName"
|
||||
label="{{ deletedParentName }} ({{ 'deleted' | i18n }})"
|
||||
>
|
||||
</bit-option>
|
||||
<bit-option
|
||||
*ngFor="let collection of nestOptions"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
[value]="collection.name"
|
||||
[label]="collection.name"
|
||||
>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
>
|
||||
<ng-container *ngIf="currentCipher.organizationId">
|
||||
<i
|
||||
class="bwi bwi-collection"
|
||||
class="bwi bwi-collection-shared"
|
||||
appStopProp
|
||||
title="{{ 'shared' | i18n }}"
|
||||
aria-hidden="true"
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
</ng-template>
|
||||
<ng-container *ngIf="!organization && row.organizationId">
|
||||
<i
|
||||
class="bwi bwi-collection"
|
||||
class="bwi bwi-collection-shared"
|
||||
appStopProp
|
||||
title="{{ 'shared' | i18n }}"
|
||||
aria-hidden="true"
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
</ng-template>
|
||||
<ng-container *ngIf="!organization && r.organizationId">
|
||||
<i
|
||||
class="bwi bwi-collection"
|
||||
class="bwi bwi-collection-shared"
|
||||
appStopProp
|
||||
title="{{ 'shared' | i18n }}"
|
||||
aria-hidden="true"
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
</ng-template>
|
||||
<ng-container *ngIf="!organization && row.organizationId">
|
||||
<i
|
||||
class="bwi bwi-collection"
|
||||
class="bwi bwi-collection-shared"
|
||||
appStopProp
|
||||
title="{{ 'shared' | i18n }}"
|
||||
aria-hidden="true"
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
</ng-template>
|
||||
<ng-container *ngIf="!organization && r.organizationId">
|
||||
<i
|
||||
class="bwi bwi-collection"
|
||||
class="bwi bwi-collection-shared"
|
||||
appStopProp
|
||||
title="{{ 'shared' | i18n }}"
|
||||
aria-hidden="true"
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
</ng-template>
|
||||
<ng-container *ngIf="!organization && row.organizationId">
|
||||
<i
|
||||
class="bwi bwi-collection"
|
||||
class="bwi bwi-collection-shared"
|
||||
appStopProp
|
||||
title="{{ 'shared' | i18n }}"
|
||||
aria-hidden="true"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<app-side-nav>
|
||||
<bit-nav-logo [openIcon]="logo" route="." [label]="'passwordManager' | i18n"></bit-nav-logo>
|
||||
|
||||
<bit-nav-item icon="bwi-collection" [text]="'vaults' | i18n" route="vault"></bit-nav-item>
|
||||
<bit-nav-item icon="bwi-vault" [text]="'vaults' | i18n" route="vault"></bit-nav-item>
|
||||
<bit-nav-item icon="bwi-send" [text]="'send' | i18n" route="sends"></bit-nav-item>
|
||||
<bit-nav-group icon="bwi-wrench" [text]="'tools' | i18n" route="tools">
|
||||
<bit-nav-item [text]="'generator' | i18n" route="tools/generator"></bit-nav-item>
|
||||
|
||||
@@ -47,12 +47,12 @@ export default {
|
||||
</app-onboarding-task>
|
||||
<app-onboarding-task
|
||||
[title]="'createProject' | i18n"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
[completed]="createProject"
|
||||
></app-onboarding-task>
|
||||
<app-onboarding-task
|
||||
[title]="'importSecrets' | i18n"
|
||||
icon="bwi-download"
|
||||
icon="bwi-import"
|
||||
[completed]="importSecrets$ | async"
|
||||
></app-onboarding-task>
|
||||
<app-onboarding-task
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<button bitButton [bitMenuTriggerFor]="itemOptions" buttonType="primary" type="button">
|
||||
<i *ngIf="!hideIcon" class="bwi bwi-plus-f" aria-hidden="true"></i>
|
||||
<i *ngIf="!hideIcon" class="bwi bwi-plus" aria-hidden="true"></i>
|
||||
{{ (hideIcon ? "createSend" : "new") | i18n }}
|
||||
</button>
|
||||
<bit-menu #itemOptions>
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
type="button"
|
||||
(click)="assignToCollections()"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-collection" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-fw bwi-collection-shared" aria-hidden="true"></i>
|
||||
{{ "assignToCollections" | i18n }}
|
||||
</button>
|
||||
<button bitMenuItem *ngIf="showEventLogs" type="button" (click)="events()">
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</td>
|
||||
<td bitCell [ngClass]="RowHeightClass" class="tw-min-w-fit">
|
||||
<div aria-hidden="true">
|
||||
<i class="bwi bwi-fw bwi-lg bwi-collection"></i>
|
||||
<i class="bwi bwi-fw bwi-lg bwi-collection-shared"></i>
|
||||
</div>
|
||||
</td>
|
||||
<td bitCell [ngClass]="RowHeightClass">
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
bitMenuItem
|
||||
(click)="assignToCollections()"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-collection" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-fw bwi-collection-shared" aria-hidden="true"></i>
|
||||
{{ "assignToCollections" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
|
||||
@@ -239,7 +239,7 @@ export class VaultFilterService implements VaultFilterServiceAbstraction {
|
||||
const collectionCopy = new CollectionView() as CollectionFilter;
|
||||
collectionCopy.id = c.id;
|
||||
collectionCopy.organizationId = c.organizationId;
|
||||
collectionCopy.icon = "bwi-collection";
|
||||
collectionCopy.icon = "bwi-collection-shared";
|
||||
if (c instanceof CollectionAdminView) {
|
||||
collectionCopy.groups = c.groups;
|
||||
collectionCopy.assigned = c.assigned;
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<ng-container>
|
||||
<bit-breadcrumb
|
||||
*ngFor="let collection of collections"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
[route]="[]"
|
||||
[queryParams]="{ collectionId: collection.id }"
|
||||
queryParamsHandling="merge"
|
||||
@@ -77,7 +77,7 @@
|
||||
id="newItemDropdown"
|
||||
appA11yTitle="{{ 'new' | i18n }}"
|
||||
>
|
||||
<i class="bwi bwi-plus-f" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-plus" aria-hidden="true"></i>
|
||||
{{ "new" | i18n }}<i class="bwi tw-ml-2" aria-hidden="true"></i>
|
||||
</button>
|
||||
<bit-menu #addOptions aria-labelledby="newItemDropdown">
|
||||
@@ -107,7 +107,7 @@
|
||||
{{ "folder" | i18n }}
|
||||
</button>
|
||||
<button *ngIf="canCreateCollections" type="button" bitMenuItem (click)="addCollection()">
|
||||
<i class="bwi bwi-fw bwi-collection" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-fw bwi-collection-shared" aria-hidden="true"></i>
|
||||
{{ "collection" | i18n }}
|
||||
</button>
|
||||
</bit-menu>
|
||||
|
||||
@@ -152,7 +152,9 @@ export class VaultHeaderComponent implements OnInit {
|
||||
}
|
||||
|
||||
protected get icon() {
|
||||
return this.filter.collectionId && this.filter.collectionId !== All ? "bwi-collection" : "";
|
||||
return this.filter.collectionId && this.filter.collectionId !== All
|
||||
? "bwi-collection-shared"
|
||||
: "";
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
<app-onboarding-task
|
||||
[title]="'importData' | i18n"
|
||||
icon="bwi-save"
|
||||
icon="bwi-import"
|
||||
[route]="['/tools/import']"
|
||||
[completed]="onboardingTasks.importData"
|
||||
>
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
(click)="addCipher()"
|
||||
*ngIf="filter.type !== 'trash'"
|
||||
>
|
||||
<i class="bwi bwi-plus-f bwi-fw" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
|
||||
{{ "newItem" | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
*ngIf="userIsAdmin"
|
||||
[title]="'importSecrets' | i18n"
|
||||
[route]="['settings', 'import']"
|
||||
icon="bwi-download"
|
||||
icon="bwi-import"
|
||||
[completed]="view.tasks.importSecrets"
|
||||
></app-onboarding-task>
|
||||
<app-onboarding-task
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<button type="button" bitButton buttonType="primary" [bitMenuTriggerFor]="newMenu">
|
||||
<i class="bwi bwi-plus-f" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-plus" aria-hidden="true"></i>
|
||||
{{ "new" | i18n }}<i class="bwi tw-ml-2" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 320 KiB After Width: | Height: | Size: 81 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -101,200 +101,102 @@ $icomoon-font-path: "~@bitwarden/angular/src/scss/bwicons/fonts/" !default;
|
||||
|
||||
// For new icons - add their glyph name and value to the map below
|
||||
$icons: (
|
||||
"universal-access": "\e991",
|
||||
"save-changes": "\e988",
|
||||
"browser": "\e985",
|
||||
"browser-alt": "\e9a3",
|
||||
"mobile": "\e986",
|
||||
"mobile-alt": "\e9a4",
|
||||
"cli": "\e987",
|
||||
"providers": "\e983",
|
||||
"vault": "\e984",
|
||||
"vault-f": "\e9ab",
|
||||
"folder-closed-f": "\e982",
|
||||
"rocket": "\e9ee",
|
||||
"ellipsis-h": "\e9ef",
|
||||
"ellipsis-v": "\e9f0",
|
||||
"safari": "\e974",
|
||||
"opera": "\e975",
|
||||
"firefox": "\e976",
|
||||
"edge": "\e977",
|
||||
"chrome": "\e978",
|
||||
"star-f": "\e979",
|
||||
"arrow-circle-up": "\e97a",
|
||||
"arrow-circle-right": "\e97b",
|
||||
"arrow-circle-left": "\e97c",
|
||||
"arrow-circle-down": "\e97d",
|
||||
"undo": "\e97e",
|
||||
"bolt": "\e97f",
|
||||
"puzzle": "\e980",
|
||||
"rss": "\e973",
|
||||
"dbl-angle-left": "\e970",
|
||||
"dbl-angle-right": "\e971",
|
||||
"hamburger": "\e972",
|
||||
"bw-folder-open-f1": "\e93e",
|
||||
"desktop": "\e96a",
|
||||
"desktop-alt": "\e9a2",
|
||||
"angle-up": "\e969",
|
||||
"user": "\e900",
|
||||
"user-f": "\e901",
|
||||
"user-monitor": "\e9a7",
|
||||
"key": "\e902",
|
||||
"share-square": "\e903",
|
||||
"hashtag": "\e904",
|
||||
"clone": "\e905",
|
||||
"list-alt": "\e906",
|
||||
"id-card": "\e907",
|
||||
"credit-card": "\e908",
|
||||
"globe": "\e909",
|
||||
"sticky-note": "\e90a",
|
||||
"folder": "\e90b",
|
||||
"lock": "\e90c",
|
||||
"lock-f": "\e90d",
|
||||
"generate": "\e90e",
|
||||
"generate-f": "\e90f",
|
||||
"cog": "\e910",
|
||||
"cog-f": "\e911",
|
||||
"check-circle": "\e912",
|
||||
"eye": "\e913",
|
||||
"pencil-square": "\e914",
|
||||
"bookmark": "\e915",
|
||||
"files": "\e916",
|
||||
"trash": "\e917",
|
||||
"plus": "\e918",
|
||||
"plus-f": "\e9a9",
|
||||
"star": "\e919",
|
||||
"list": "\e91a",
|
||||
"angle-down": "\e92d",
|
||||
"external-link": "\e91c",
|
||||
"refresh": "\e91d",
|
||||
"search": "\e91f",
|
||||
"filter": "\e920",
|
||||
"plus-circle": "\e921",
|
||||
"user-circle": "\e922",
|
||||
"question-circle": "\e923",
|
||||
"cogs": "\e924",
|
||||
"minus-circle": "\e925",
|
||||
"send": "\e926",
|
||||
"send-f": "\e927",
|
||||
"download": "\e928",
|
||||
"pencil": "\e929",
|
||||
"sign-out": "\e92a",
|
||||
"share": "\e92b",
|
||||
"clock": "\e92c",
|
||||
"angle-left": "\e96b",
|
||||
"caret-left": "\e92e",
|
||||
"square": "\e92f",
|
||||
"collection": "\e930",
|
||||
"bank": "\e931",
|
||||
"shield": "\e932",
|
||||
"stop": "\e933",
|
||||
"plus-square": "\e934",
|
||||
"save": "\e935",
|
||||
"sign-in": "\e936",
|
||||
"spinner": "\e937",
|
||||
"dollar": "\e939",
|
||||
"check": "\e93a",
|
||||
"check-square": "\e93b",
|
||||
"minus-square": "\e93c",
|
||||
"close": "\e93d",
|
||||
"share-arrow": "\e96c",
|
||||
"paperclip": "\e93f",
|
||||
"bitcoin": "\e940",
|
||||
"cut": "\e941",
|
||||
"frown": "\e942",
|
||||
"folder-open": "\e943",
|
||||
"bug": "\e946",
|
||||
"chain-broken": "\e947",
|
||||
"dashboard": "\e948",
|
||||
"envelope": "\e949",
|
||||
"exclamation-circle": "\e94a",
|
||||
"exclamation-triangle": "\e94b",
|
||||
"caret-right": "\e94c",
|
||||
"file-pdf": "\e94e",
|
||||
"file-text": "\e94f",
|
||||
"info-circle": "\e952",
|
||||
"lightbulb": "\e953",
|
||||
"link": "\e954",
|
||||
"linux": "\e956",
|
||||
"long-arrow-right": "\e957",
|
||||
"money": "\e958",
|
||||
"play": "\e959",
|
||||
"reddit": "\e95a",
|
||||
"refresh-tab": "\e95b",
|
||||
"sitemap": "\e95c",
|
||||
"sliders": "\e95d",
|
||||
"tag": "\e95e",
|
||||
"thumb-tack": "\e95f",
|
||||
"thumbs-up": "\e960",
|
||||
"unlock": "\e962",
|
||||
"users": "\e963",
|
||||
"wrench": "\e965",
|
||||
"ban": "\e967",
|
||||
"camera": "\e968",
|
||||
"angle-right": "\e91b",
|
||||
"eye-slash": "\e96d",
|
||||
"file": "\e96e",
|
||||
"paste": "\e96f",
|
||||
"github": "\e950",
|
||||
"facebook": "\e94d",
|
||||
"paypal": "\e938",
|
||||
"brave": "\e951",
|
||||
"google": "\e9a5",
|
||||
"duckduckgo": "\e9bb",
|
||||
"tor": "\e9bc",
|
||||
"vivaldi": "\e9bd",
|
||||
"linkedin": "\e955",
|
||||
"discourse": "\e91e",
|
||||
"twitter": "\e961",
|
||||
"x-twitter": "\e9be",
|
||||
"youtube": "\e966",
|
||||
"windows": "\e964",
|
||||
"apple": "\e945",
|
||||
"android": "\e944",
|
||||
"error": "\e981",
|
||||
"numbered-list": "\e989",
|
||||
"billing": "\e98a",
|
||||
"family": "\e98b",
|
||||
"provider": "\e98c",
|
||||
"business": "\e98d",
|
||||
"learning": "\e98e",
|
||||
"chat": "\e990",
|
||||
"server": "\e98f",
|
||||
"search-book": "\e992",
|
||||
"twitch": "\e993",
|
||||
"community": "\e994",
|
||||
"mastodon": "\e995",
|
||||
"insurance": "\e996",
|
||||
"wireless": "\e997",
|
||||
"software-license": "\e998",
|
||||
"instagram": "\e999",
|
||||
"down-solid": "\e99a",
|
||||
"up-solid": "\e99b",
|
||||
"up-down-btn": "\e99c",
|
||||
"caret-up": "\e99d",
|
||||
"caret-down": "\e99e",
|
||||
"passkey": "\e99f",
|
||||
"lock-encrypted": "\e9a0",
|
||||
"back": "\e9a8",
|
||||
"popout": "\e9aa",
|
||||
"wand": "\e9a6",
|
||||
"msp": "\e9a1",
|
||||
"totp-codes-alt": "\e9ac",
|
||||
"totp-codes-alt2": "\e9ad",
|
||||
"totp-codes": "\e9ae",
|
||||
"authenticator": "\e9af",
|
||||
"fingerprint": "\e9b0",
|
||||
"expired": "\e9ba",
|
||||
"icon-1": "\e9b1",
|
||||
"icon-2": "\e9b2",
|
||||
"icon-3": "\e9b3",
|
||||
"icon-4": "\e9b4",
|
||||
"icon-5": "\e9b5",
|
||||
"icon-6": "\e9b6",
|
||||
"icon-7": "\e9b7",
|
||||
"icon-8": "\e9b8",
|
||||
"icon-9": "\e9b9",
|
||||
"angle-down": "\e900",
|
||||
"angle-left": "\e901",
|
||||
"angle-right": "\e902",
|
||||
"angle-up": "\e903",
|
||||
"bell": "\e904",
|
||||
"billing": "\e905",
|
||||
"bitcoin": "\e906",
|
||||
"browser-alt": "\e907",
|
||||
"browser": "\e908",
|
||||
"brush": "\e909",
|
||||
"bug": "\e90a",
|
||||
"business": "\e90b",
|
||||
"camera": "\e90c",
|
||||
"check-circle": "\e90e",
|
||||
"check": "\e90f",
|
||||
"cli": "\e910",
|
||||
"clock": "\e911",
|
||||
"close": "\e912",
|
||||
"cog-f": "\e913",
|
||||
"cog": "\e914",
|
||||
"collection": "\e915",
|
||||
"collection-shared": "\e916",
|
||||
"clone": "\e917",
|
||||
"dollar": "\e919",
|
||||
"down-solid": "\e91a",
|
||||
"download": "\e91b",
|
||||
"drag-and-drop": "\e91c",
|
||||
"ellipsis-h": "\e91d",
|
||||
"ellipsis-v": "\e91e",
|
||||
"envelope": "\e91f",
|
||||
"error": "\e920",
|
||||
"exclamation-triangle": "\e921",
|
||||
"external-link": "\e922",
|
||||
"eye-slash": "\e923",
|
||||
"eye": "\e924",
|
||||
"family": "\e925",
|
||||
"file-text": "\e926",
|
||||
"file": "\e927",
|
||||
"files": "\e928",
|
||||
"filter": "\e929",
|
||||
"folder": "\e92a",
|
||||
"generate": "\e92b",
|
||||
"globe": "\e92c",
|
||||
"hashtag": "\e92d",
|
||||
"id-card": "\e92e",
|
||||
"info-circle": "\e92f",
|
||||
"import": "\e930",
|
||||
"key": "\e931",
|
||||
"list-alt": "\e933",
|
||||
"list": "\e934",
|
||||
"lock-encrypted": "\e935",
|
||||
"lock-f": "\e936",
|
||||
"lock": "\e937",
|
||||
"shield": "\e938",
|
||||
"minus-circle": "\e939",
|
||||
"mobile": "\e93a",
|
||||
"msp": "\e93b",
|
||||
"sticky-note": "\e93c",
|
||||
"numbered-list": "\e93d",
|
||||
"paperclip": "\e93e",
|
||||
"passkey": "\e93f",
|
||||
"pencil-square": "\e940",
|
||||
"pencil": "\e941",
|
||||
"plus-circle": "\e942",
|
||||
"plus": "\e943",
|
||||
"popout": "\e944",
|
||||
"provider": "\e945",
|
||||
"puzzle": "\e946",
|
||||
"question-circle": "\e947",
|
||||
"refresh": "\e948",
|
||||
"search": "\e949",
|
||||
"send": "\e94a",
|
||||
"share": "\e94b",
|
||||
"sign-in": "\e94c",
|
||||
"sign-out": "\e94d",
|
||||
"sliders": "\e94e",
|
||||
"spinner": "\e94f",
|
||||
"star-f": "\e950",
|
||||
"star": "\e951",
|
||||
"tag": "\e952",
|
||||
"trash": "\e953",
|
||||
"undo": "\e954",
|
||||
"universal-access": "\e955",
|
||||
"unlock": "\e956",
|
||||
"up-down-btn": "\e957",
|
||||
"up-solid": "\e958",
|
||||
"user-monitor": "\e959",
|
||||
"user": "\e95a",
|
||||
"users": "\e95b",
|
||||
"vault": "\e95c",
|
||||
"wireless": "\e95d",
|
||||
"wrench": "\e95e",
|
||||
"paypal": "\e95f",
|
||||
"credit-card": "\e9a2",
|
||||
"desktop": "\e9a3",
|
||||
"archive": "\e9c1",
|
||||
);
|
||||
|
||||
@each $name, $glyph in $icons {
|
||||
|
||||
@@ -85,7 +85,7 @@ export const SecondLevel: Story = {
|
||||
args: {
|
||||
items: [
|
||||
{ name: "Acme Vault", route: "/" },
|
||||
{ icon: "bwi-collection", name: "Collection", route: "collection" },
|
||||
{ icon: "bwi-collection-shared", name: "Collection", route: "collection" },
|
||||
] as Breadcrumb[],
|
||||
},
|
||||
};
|
||||
@@ -95,12 +95,12 @@ export const Overflow: Story = {
|
||||
args: {
|
||||
items: [
|
||||
{ name: "Acme Vault", route: "" },
|
||||
{ icon: "bwi-collection", name: "Collection", route: "collection" },
|
||||
{ icon: "bwi-collection", name: "Middle-Collection 1", route: "middle-collection-1" },
|
||||
{ icon: "bwi-collection", name: "Middle-Collection 2", route: "middle-collection-2" },
|
||||
{ icon: "bwi-collection", name: "Middle-Collection 3", route: "middle-collection-3" },
|
||||
{ icon: "bwi-collection", name: "Middle-Collection 4", route: "middle-collection-4" },
|
||||
{ icon: "bwi-collection", name: "End Collection", route: "end-collection" },
|
||||
{ icon: "bwi-collection-shared", name: "Collection", route: "collection" },
|
||||
{ icon: "bwi-collection-shared", name: "Middle-Collection 1", route: "middle-collection-1" },
|
||||
{ icon: "bwi-collection-shared", name: "Middle-Collection 2", route: "middle-collection-2" },
|
||||
{ icon: "bwi-collection-shared", name: "Middle-Collection 3", route: "middle-collection-3" },
|
||||
{ icon: "bwi-collection-shared", name: "Middle-Collection 4", route: "middle-collection-4" },
|
||||
{ icon: "bwi-collection-shared", name: "End Collection", route: "end-collection" },
|
||||
] as Breadcrumb[],
|
||||
},
|
||||
};
|
||||
|
||||
@@ -215,41 +215,76 @@ export const Collections: Story = {
|
||||
name: "Select collections",
|
||||
hint: "Collections will be assigned to the associated member",
|
||||
baseItems: [
|
||||
{ id: "1", listName: "Collection 1", labelName: "Collection 1", icon: "bwi-collection" },
|
||||
{ id: "2", listName: "Collection 2", labelName: "Collection 2", icon: "bwi-collection" },
|
||||
{ id: "3", listName: "Collection 3", labelName: "Collection 3", icon: "bwi-collection" },
|
||||
{
|
||||
id: "1",
|
||||
listName: "Collection 1",
|
||||
labelName: "Collection 1",
|
||||
icon: "bwi-collection-shared",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
listName: "Collection 2",
|
||||
labelName: "Collection 2",
|
||||
icon: "bwi-collection-shared",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
listName: "Collection 3",
|
||||
labelName: "Collection 3",
|
||||
icon: "bwi-collection-shared",
|
||||
},
|
||||
{
|
||||
id: "3.5",
|
||||
listName: "Child Collection 1 for Parent 1",
|
||||
labelName: "Child Collection 1 for Parent 1",
|
||||
icon: "bwi-collection",
|
||||
icon: "bwi-collection-shared",
|
||||
parentGrouping: "Parent 1",
|
||||
},
|
||||
{
|
||||
id: "3.55",
|
||||
listName: "Child Collection 2 for Parent 1",
|
||||
labelName: "Child Collection 2 for Parent 1",
|
||||
icon: "bwi-collection",
|
||||
icon: "bwi-collection-shared",
|
||||
parentGrouping: "Parent 1",
|
||||
},
|
||||
{
|
||||
id: "3.59",
|
||||
listName: "Child Collection 3 for Parent 1",
|
||||
labelName: "Child Collection 3 for Parent 1",
|
||||
icon: "bwi-collection",
|
||||
icon: "bwi-collection-shared",
|
||||
parentGrouping: "Parent 1",
|
||||
},
|
||||
{
|
||||
id: "3.75",
|
||||
listName: "Child Collection 1 for Parent 2",
|
||||
labelName: "Child Collection 1 for Parent 2",
|
||||
icon: "bwi-collection",
|
||||
icon: "bwi-collection-shared",
|
||||
parentGrouping: "Parent 2",
|
||||
},
|
||||
{ id: "4", listName: "Collection 4", labelName: "Collection 4", icon: "bwi-collection" },
|
||||
{ id: "5", listName: "Collection 5", labelName: "Collection 5", icon: "bwi-collection" },
|
||||
{ id: "6", listName: "Collection 6", labelName: "Collection 6", icon: "bwi-collection" },
|
||||
{ id: "7", listName: "Collection 7", labelName: "Collection 7", icon: "bwi-collection" },
|
||||
{
|
||||
id: "4",
|
||||
listName: "Collection 4",
|
||||
labelName: "Collection 4",
|
||||
icon: "bwi-collection-shared",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
listName: "Collection 5",
|
||||
labelName: "Collection 5",
|
||||
icon: "bwi-collection-shared",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
listName: "Collection 6",
|
||||
labelName: "Collection 6",
|
||||
icon: "bwi-collection-shared",
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
listName: "Collection 7",
|
||||
labelName: "Collection 7",
|
||||
icon: "bwi-collection-shared",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
14
libs/components/src/icon/icons/generator.ts
Normal file
14
libs/components/src/icon/icons/generator.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { svgIcon } from "../icon";
|
||||
|
||||
export const GeneratorInactive = svgIcon`
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.05169 10.7766C3.00697 11.1884 3.30455 11.5585 3.71634 11.6032C4.12814 11.6479 4.49821 11.3503 4.54292 10.9386C4.93486 7.32891 8.05586 4.49609 11.8708 4.49609C14.608 4.49609 16.9911 5.95574 18.2619 8.11589H16.2676C15.8534 8.11589 15.5176 8.45168 15.5176 8.86589C15.5176 9.2801 15.8534 9.61589 16.2676 9.61589H20.2491C20.6634 9.61589 20.9991 9.2801 20.9991 8.86589V4.88347C20.9991 4.46926 20.6634 4.13347 20.2491 4.13347C19.8349 4.13347 19.4991 4.46926 19.4991 4.88347V7.26212C17.9511 4.70467 15.1112 2.99609 11.8708 2.99609C7.30492 2.99609 3.52788 6.39108 3.05169 10.7766ZM20.9425 13.2164C20.9872 12.8046 20.6896 12.4345 20.2778 12.3898C19.866 12.3451 19.4959 12.6427 19.4512 13.0545C19.0593 16.6641 15.9383 19.4969 12.1233 19.4969C9.38639 19.4969 7.0034 18.0375 5.73253 15.8776H7.72852C8.14273 15.8776 8.47852 15.5418 8.47852 15.1276C8.47852 14.7134 8.14273 14.3776 7.72852 14.3776H3.74695C3.33273 14.3776 2.99695 14.7134 2.99695 15.1276V19.11C2.99695 19.5242 3.33273 19.86 3.74695 19.86C4.16116 19.86 4.49695 19.5242 4.49695 19.11V16.7341C6.04539 19.2898 8.88426 20.9969 12.1233 20.9969C16.6892 20.9969 20.4663 17.6019 20.9425 13.2164ZM12.7514 9.43718C12.7514 9.02297 12.4156 8.68718 12.0014 8.68718C11.5872 8.68718 11.2514 9.02297 11.2514 9.43718V11.0305L9.75498 10.5402C9.36135 10.4113 8.93772 10.6258 8.80876 11.0195C8.6798 11.4131 8.89436 11.8367 9.28799 11.9657L10.798 12.4604L9.85608 13.7799C9.61543 14.117 9.69364 14.5854 10.0308 14.826C10.3679 15.0667 10.8363 14.9885 11.0769 14.6514L12.0014 13.3562L12.9261 14.6514C13.1667 14.9885 13.6351 15.0667 13.9723 14.826C14.3094 14.5853 14.3876 14.1169 14.1469 13.7798L13.2049 12.4603L14.7146 11.9657C15.1083 11.8367 15.3228 11.4131 15.1939 11.0195C15.0649 10.6258 14.6412 10.4113 14.2476 10.5402L12.7514 11.0305V9.43718Z" class="tw-fill-secondary-600 group-hover/tab-nav-btn:tw-fill-primary-600" />
|
||||
</svg>
|
||||
`;
|
||||
|
||||
export const GeneratorActive = svgIcon`
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12Z" class="tw-fill-primary-100" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.05169 10.7766C3.00697 11.1884 3.30455 11.5585 3.71634 11.6032C4.12814 11.6479 4.49821 11.3503 4.54292 10.9386C4.93486 7.32891 8.05586 4.49609 11.8708 4.49609C14.608 4.49609 16.9911 5.95574 18.2619 8.11589H16.2676C15.8534 8.11589 15.5176 8.45168 15.5176 8.86589C15.5176 9.2801 15.8534 9.61589 16.2676 9.61589H20.2491C20.6634 9.61589 20.9991 9.2801 20.9991 8.86589V4.88347C20.9991 4.46926 20.6634 4.13347 20.2491 4.13347C19.8349 4.13347 19.4991 4.46926 19.4991 4.88347V7.26212C17.9511 4.70467 15.1112 2.99609 11.8708 2.99609C7.30492 2.99609 3.52788 6.39108 3.05169 10.7766ZM20.9425 13.2164C20.9872 12.8046 20.6896 12.4345 20.2778 12.3898C19.866 12.3451 19.4959 12.6427 19.4512 13.0545C19.0593 16.6641 15.9383 19.4969 12.1233 19.4969C9.38639 19.4969 7.0034 18.0375 5.73253 15.8776H7.72852C8.14273 15.8776 8.47852 15.5418 8.47852 15.1276C8.47852 14.7134 8.14273 14.3776 7.72852 14.3776H3.74695C3.33273 14.3776 2.99695 14.7134 2.99695 15.1276V19.11C2.99695 19.5242 3.33273 19.86 3.74695 19.86C4.16116 19.86 4.49695 19.5242 4.49695 19.11V16.7341C6.04539 19.2898 8.88426 20.9969 12.1233 20.9969C16.6892 20.9969 20.4663 17.6019 20.9425 13.2164ZM12.7514 9.43718C12.7514 9.02297 12.4156 8.68718 12.0014 8.68718C11.5872 8.68718 11.2514 9.02297 11.2514 9.43718V11.0305L9.75498 10.5402C9.36135 10.4113 8.93772 10.6258 8.80876 11.0195C8.6798 11.4131 8.89436 11.8367 9.28799 11.9657L10.798 12.4604L9.85608 13.7799C9.61543 14.117 9.69364 14.5854 10.0308 14.826C10.3679 15.0667 10.8363 14.9885 11.0769 14.6514L12.0014 13.3562L12.9261 14.6514C13.1667 14.9885 13.6351 15.0667 13.9723 14.826C14.3094 14.5853 14.3876 14.1169 14.1469 13.7798L13.2049 12.4603L14.7146 11.9657C15.1083 11.8367 15.3228 11.4131 15.1939 11.0195C15.0649 10.6258 14.6412 10.4113 14.2476 10.5402L12.7514 11.0305V9.43718Z" class="tw-fill-primary-600" />
|
||||
</svg>
|
||||
`;
|
||||
@@ -2,3 +2,7 @@ export * from "./search";
|
||||
export * from "./security";
|
||||
export * from "./no-access";
|
||||
export * from "./no-results";
|
||||
export * from "./generator";
|
||||
export * from "./send";
|
||||
export * from "./settings";
|
||||
export * from "./vault";
|
||||
|
||||
14
libs/components/src/icon/icons/send.ts
Normal file
14
libs/components/src/icon/icons/send.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { svgIcon } from "../icon";
|
||||
|
||||
export const SendInactive = svgIcon`
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.26134 15.8194L3.32764 13.1612C2.24617 12.6767 2.2182 11.1515 3.28118 10.6277L19.4762 2.6472C20.5111 2.13723 21.6841 3.02766 21.471 4.16154L18.5696 19.6026C18.3851 20.5849 17.2603 21.0629 16.4249 20.5141L14.1152 18.9965L11.7106 21.1294C11.4413 21.3683 11.0937 21.5003 10.7337 21.5003C9.92052 21.5003 9.26134 20.8411 9.26134 20.0279V15.8194ZM4.13499 11.8792L19.9599 4.08112L17.1231 19.178L10.8804 15.0764L15.5129 10.6535C15.8125 10.3675 15.8235 9.89271 15.5374 9.59312C15.2514 9.29353 14.7767 9.28254 14.4771 9.56857L9.52695 14.2947L4.13499 11.8792ZM12.8167 18.1433L10.7613 16.7929V19.9664L12.8167 18.1433Z" class="tw-fill-secondary-600 group-hover/tab-nav-btn:tw-fill-primary-600" />
|
||||
</svg>
|
||||
`;
|
||||
|
||||
export const SendActive = svgIcon`
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.0621 20.2221V14.7319L15.4504 9.56824L20.2795 3.68408L17.32 19.6084L13.9377 17.5259L10.9361 20.2221H10.0621Z" class="tw-fill-primary-100" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.26134 15.8194L3.32764 13.1612C2.24617 12.6767 2.2182 11.1515 3.28118 10.6277L19.4762 2.6472C20.5111 2.13723 21.6841 3.02766 21.471 4.16154L18.5696 19.6026C18.3851 20.5849 17.2603 21.0629 16.4249 20.5141L14.1152 18.9965L11.7106 21.1294C11.4413 21.3683 11.0937 21.5003 10.7337 21.5003C9.92052 21.5003 9.26134 20.8411 9.26134 20.0279V15.8194ZM4.13499 11.8792L19.9599 4.08112L17.1231 19.178L10.8804 15.0764L15.5129 10.6535C15.8125 10.3675 15.8235 9.89271 15.5374 9.59312C15.2514 9.29353 14.7767 9.28254 14.4771 9.56857L9.52695 14.2947L4.13499 11.8792ZM12.8167 18.1433L10.7613 16.7929V19.9664L12.8167 18.1433Z" class="tw-fill-primary-600" />
|
||||
</svg>
|
||||
`;
|
||||
16
libs/components/src/icon/icons/settings.ts
Normal file
16
libs/components/src/icon/icons/settings.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { svgIcon } from "../icon";
|
||||
|
||||
export const SettingsInactive = svgIcon`
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM14.5 12C14.5 13.3807 13.3807 14.5 12 14.5C10.6193 14.5 9.5 13.3807 9.5 12C9.5 10.6193 10.6193 9.5 12 9.5C13.3807 9.5 14.5 10.6193 14.5 12Z" class="tw-fill-secondary-600 group-hover/tab-nav-btn:tw-fill-primary-600" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8618 4.17107L14.6161 2.69633C14.5491 2.29451 14.2014 2 13.7941 2H10.2059C9.79857 2 9.45091 2.29451 9.38394 2.69633L9.13815 4.17107C8.22425 4.50524 7.38523 4.99487 6.6531 5.60794L5.25079 5.08259C4.86931 4.93967 4.44043 5.0935 4.23675 5.44629L2.44269 8.55369C2.239 8.90648 2.32023 9.35482 2.63473 9.61373L3.78982 10.5646C3.70886 11.0309 3.66666 11.5105 3.66666 12C3.66666 12.4895 3.70886 12.969 3.78981 13.4354L2.63473 14.3863C2.32023 14.6452 2.239 15.0935 2.44269 15.4463L4.23675 18.5537C4.44043 18.9065 4.86931 19.0603 5.25079 18.9174L6.65308 18.392C7.38521 19.0051 8.22424 19.4948 9.13815 19.8289L9.38394 21.3037C9.45091 21.7055 9.79857 22 10.2059 22H13.7941C14.2014 22 14.5491 21.7055 14.6161 21.3037L14.8618 19.8289C15.7757 19.4948 16.6148 19.0051 17.3469 18.3921L18.7492 18.9174C19.1306 19.0603 19.5595 18.9065 19.7632 18.5537L21.5573 15.4463C21.7609 15.0935 21.6797 14.6452 21.3652 14.3863L20.2102 13.4354C20.2911 12.9691 20.3333 12.4895 20.3333 12C20.3333 11.5105 20.2911 11.0309 20.2102 10.5646L21.3652 9.61373C21.6797 9.35482 21.7609 8.90648 21.5573 8.55369L19.7632 5.44629C19.5595 5.0935 19.1306 4.93967 18.7492 5.08259L17.3469 5.60793C16.6148 4.99486 15.7757 4.50524 14.8618 4.17107ZM14.3467 5.57985L13.5259 5.27973L13.2293 3.5H10.7707L10.4741 5.27973L9.65327 5.57985C8.90522 5.85338 8.21727 6.25458 7.61612 6.75798L6.94571 7.31937L5.25341 6.68538L4.0241 8.8146L5.417 9.96128L5.26771 10.8212C5.2014 11.2031 5.16666 11.5969 5.16666 12C5.16666 12.4031 5.2014 12.7968 5.26771 13.1788L5.417 14.0387L4.0241 15.1854L5.25341 17.3146L6.94569 16.6806L7.6161 17.242C8.21726 17.7454 8.90521 18.1466 9.65327 18.4201L10.4741 18.7203L10.7707 20.5H13.2293L13.5259 18.7203L14.3467 18.4201C15.0948 18.1466 15.7827 17.7454 16.3839 17.242L17.0543 16.6806L18.7465 17.3146L19.9758 15.1854L18.583 14.0387L18.7323 13.1788C18.7986 12.7969 18.8333 12.4031 18.8333 12C18.8333 11.5969 18.7986 11.2031 18.7323 10.8212L18.583 9.96125L19.9758 8.8146L18.7465 6.68538L17.0543 7.31936L16.3839 6.75797C15.7827 6.25458 15.0948 5.85337 14.3467 5.57985ZM20.2582 14.6963L20.2577 14.6973L20.2582 14.6963ZM13.1365 2.94293C13.1364 2.94267 13.1365 2.9432 13.1365 2.94293V2.94293Z" class="tw-fill-secondary-600 group-hover/tab-nav-btn:tw-fill-primary-600" />
|
||||
</svg>
|
||||
`;
|
||||
|
||||
export const SettingsActive = svgIcon`
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9672 5.03286C19.2837 5.00445 19.5977 5.15974 19.7632 5.44632L21.5573 8.55372C21.7609 8.90651 21.6797 9.35485 21.3652 9.61376L20.2102 10.5646C20.2911 11.0309 20.3333 11.5106 20.3333 12C20.3333 12.4895 20.2911 12.9691 20.2102 13.4354L21.3652 14.3863C21.6797 14.6452 21.7609 15.0935 21.5573 15.4463L19.7632 18.5537C19.5595 18.9065 19.1306 19.0603 18.7492 18.9174L17.3469 18.3921C16.6148 19.0052 15.7757 19.4948 14.8618 19.829L14.6161 21.3037C14.5491 21.7055 14.2014 22 13.7941 22H10.2059C9.79857 22 9.45091 21.7055 9.38394 21.3037L9.13815 19.829C8.22424 19.4948 7.38521 19.0052 6.65308 18.3921L5.25079 18.9174C5.17921 18.9442 5.10596 18.9606 5.03284 18.9672L10.2322 13.7678C10.6846 14.2202 11.3096 14.5 12 14.5C13.3807 14.5 14.5 13.3807 14.5 12C14.5 11.3097 14.2202 10.6847 13.7678 10.2323L18.9672 5.03286Z" class="tw-fill-primary-100" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM14.5 12C14.5 13.3807 13.3807 14.5 12 14.5C10.6193 14.5 9.5 13.3807 9.5 12C9.5 10.6193 10.6193 9.5 12 9.5C13.3807 9.5 14.5 10.6193 14.5 12Z" class="tw-fill-primary-600" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8618 4.17107L14.6161 2.69633C14.5491 2.29451 14.2014 2 13.7941 2H10.2059C9.79857 2 9.45091 2.29451 9.38394 2.69633L9.13815 4.17107C8.22425 4.50524 7.38523 4.99487 6.6531 5.60794L5.25079 5.08259C4.86931 4.93967 4.44043 5.0935 4.23675 5.44629L2.44269 8.55369C2.239 8.90648 2.32023 9.35482 2.63473 9.61373L3.78982 10.5646C3.70886 11.0309 3.66666 11.5105 3.66666 12C3.66666 12.4895 3.70886 12.969 3.78981 13.4354L2.63473 14.3863C2.32023 14.6452 2.239 15.0935 2.44269 15.4463L4.23675 18.5537C4.44043 18.9065 4.86931 19.0603 5.25079 18.9174L6.65308 18.392C7.38521 19.0051 8.22424 19.4948 9.13815 19.8289L9.38394 21.3037C9.45091 21.7055 9.79857 22 10.2059 22H13.7941C14.2014 22 14.5491 21.7055 14.6161 21.3037L14.8618 19.8289C15.7757 19.4948 16.6148 19.0051 17.3469 18.3921L18.7492 18.9174C19.1306 19.0603 19.5595 18.9065 19.7632 18.5537L21.5573 15.4463C21.7609 15.0935 21.6797 14.6452 21.3652 14.3863L20.2102 13.4354C20.2911 12.9691 20.3333 12.4895 20.3333 12C20.3333 11.5105 20.2911 11.0309 20.2102 10.5646L21.3652 9.61373C21.6797 9.35482 21.7609 8.90648 21.5573 8.55369L19.7632 5.44629C19.5595 5.0935 19.1306 4.93967 18.7492 5.08259L17.3469 5.60793C16.6148 4.99486 15.7757 4.50524 14.8618 4.17107ZM14.3467 5.57985L13.5259 5.27973L13.2293 3.5H10.7707L10.4741 5.27973L9.65327 5.57985C8.90522 5.85338 8.21727 6.25458 7.61612 6.75798L6.94571 7.31937L5.25341 6.68538L4.0241 8.8146L5.417 9.96128L5.26771 10.8212C5.2014 11.2031 5.16666 11.5969 5.16666 12C5.16666 12.4031 5.2014 12.7968 5.26771 13.1788L5.417 14.0387L4.0241 15.1854L5.25341 17.3146L6.94569 16.6806L7.6161 17.242C8.21726 17.7454 8.90521 18.1466 9.65327 18.4201L10.4741 18.7203L10.7707 20.5H13.2293L13.5259 18.7203L14.3467 18.4201C15.0948 18.1466 15.7827 17.7454 16.3839 17.242L17.0543 16.6806L18.7465 17.3146L19.9758 15.1854L18.583 14.0387L18.7323 13.1788C18.7986 12.7969 18.8333 12.4031 18.8333 12C18.8333 11.5969 18.7986 11.2031 18.7323 10.8212L18.583 9.96125L19.9758 8.8146L18.7465 6.68538L17.0543 7.31936L16.3839 6.75797C15.7827 6.25458 15.0948 5.85337 14.3467 5.57985ZM20.2582 14.6963L20.2577 14.6973L20.2582 14.6963ZM13.1365 2.94293C13.1364 2.94267 13.1365 2.9432 13.1365 2.94293V2.94293Z" class="tw-fill-primary-600" />
|
||||
</svg>
|
||||
`;
|
||||
16
libs/components/src/icon/icons/vault.ts
Normal file
16
libs/components/src/icon/icons/vault.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { svgIcon } from "../icon";
|
||||
|
||||
export const VaultInactive = svgIcon`
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.16151 14.7066C7.57847 15.1817 8.12811 15.5302 8.75 15.6897V16.5488C8.75 16.963 9.08579 17.2988 9.5 17.2988C9.91421 17.2988 10.25 16.963 10.25 16.5488V15.6993C10.881 15.5462 11.4395 15.199 11.8635 14.7222L12.6407 15.1704C12.9995 15.3773 13.4584 15.2544 13.6657 14.8957C13.873 14.5371 13.7501 14.0786 13.3913 13.8717L12.5794 13.4035C12.6587 13.1163 12.7012 12.8131 12.7012 12.4997C12.7012 12.1815 12.6574 11.874 12.5758 11.583L13.3929 11.1118C13.7517 10.9048 13.8745 10.4464 13.6673 10.0877C13.46 9.72912 13.0011 9.60616 12.6423 9.8131L11.8547 10.2673C11.4318 9.79552 10.8766 9.45211 10.25 9.30002V8.43391C10.25 8.0197 9.91421 7.68391 9.5 7.68391C9.08579 7.68391 8.75 8.0197 8.75 8.43391V9.30968C8.13244 9.46809 7.58613 9.81284 7.17024 10.2828L6.35577 9.8131C5.99696 9.60616 5.53805 9.72912 5.33077 10.0877C5.1235 10.4464 5.24635 10.9048 5.60516 11.1118L6.45732 11.6032C6.37929 11.8882 6.33754 12.1889 6.33754 12.4997C6.33754 12.8058 6.37804 13.1021 6.45381 13.3832L5.60676 13.8717C5.24794 14.0786 5.12509 14.5371 5.33237 14.8957C5.53964 15.2544 5.99855 15.3773 6.35737 15.1704L7.16151 14.7066ZM7.83754 12.4997C7.83754 13.5327 8.636 14.2864 9.51935 14.2864C10.4027 14.2864 11.2012 13.5327 11.2012 12.4997C11.2012 11.4667 10.4027 10.713 9.51935 10.713C8.636 10.713 7.83754 11.4667 7.83754 12.4997Z" class="tw-fill-secondary-600 group-hover/tab-nav-btn:tw-fill-primary-600" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7 5C21.418 5 22 5.58203 22 6.3V18.6838C22 19.4018 21.418 19.9838 20.7 19.9838H19.3105V20.2957C19.3105 20.7099 18.9748 21.0457 18.5605 21.0457C18.1463 21.0457 17.8105 20.7099 17.8105 20.2957V19.9838H6.18555V20.2957C6.18555 20.7099 5.84976 21.0457 5.43555 21.0457C5.02133 21.0457 4.68555 20.7099 4.68555 20.2957V19.9838H3.3C2.58203 19.9838 2 19.4018 2 18.6838V6.3C2 5.58203 2.58203 5 3.3 5H20.7ZM20.5 16.0509V18.4838H3.5V6.5H20.5V8.93202H19.1875C18.7733 8.93202 18.4375 9.26781 18.4375 9.68202C18.4375 10.0962 18.7733 10.432 19.1875 10.432H20.5V14.5509H19.1875C18.7733 14.5509 18.4375 14.8867 18.4375 15.3009C18.4375 15.7152 18.7733 16.0509 19.1875 16.0509H20.5Z" class="tw-fill-secondary-600 group-hover/tab-nav-btn:tw-fill-primary-600" />
|
||||
</svg>
|
||||
`;
|
||||
|
||||
export const VaultActive = svgIcon`
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.5034 18.4716H3.50201L9.67797 14.294C10.3648 14.1965 10.7743 13.8378 10.9689 13.4272L20.5034 6.47314V18.4716Z" class="tw-fill-primary-100" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.16151 14.7066C7.57847 15.1817 8.12811 15.5302 8.75 15.6897V16.5488C8.75 16.963 9.08579 17.2988 9.5 17.2988C9.91421 17.2988 10.25 16.963 10.25 16.5488V15.6993C10.881 15.5462 11.4395 15.199 11.8635 14.7222L12.6407 15.1704C12.9995 15.3773 13.4584 15.2544 13.6657 14.8957C13.873 14.5371 13.7501 14.0786 13.3913 13.8717L12.5794 13.4035C12.6587 13.1163 12.7012 12.8131 12.7012 12.4997C12.7012 12.1815 12.6574 11.874 12.5758 11.583L13.3929 11.1118C13.7517 10.9048 13.8745 10.4464 13.6673 10.0877C13.46 9.72912 13.0011 9.60616 12.6423 9.8131L11.8547 10.2673C11.4318 9.79552 10.8766 9.45211 10.25 9.30002V8.43391C10.25 8.0197 9.91421 7.68391 9.5 7.68391C9.08579 7.68391 8.75 8.0197 8.75 8.43391V9.30968C8.13244 9.46809 7.58613 9.81284 7.17024 10.2828L6.35577 9.8131C5.99696 9.60616 5.53805 9.72912 5.33077 10.0877C5.1235 10.4464 5.24635 10.9048 5.60516 11.1118L6.45732 11.6032C6.37929 11.8882 6.33754 12.1889 6.33754 12.4997C6.33754 12.8058 6.37804 13.1021 6.45381 13.3832L5.60676 13.8717C5.24794 14.0786 5.12509 14.5371 5.33237 14.8957C5.53964 15.2544 5.99855 15.3773 6.35737 15.1704L7.16151 14.7066ZM7.83754 12.4997C7.83754 13.5327 8.636 14.2864 9.51935 14.2864C10.4027 14.2864 11.2012 13.5327 11.2012 12.4997C11.2012 11.4667 10.4027 10.713 9.51935 10.713C8.636 10.713 7.83754 11.4667 7.83754 12.4997Z" class="tw-fill-primary-600" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7 5C21.418 5 22 5.58203 22 6.3V18.6838C22 19.4018 21.418 19.9838 20.7 19.9838H19.3105V20.2957C19.3105 20.7099 18.9748 21.0457 18.5605 21.0457C18.1463 21.0457 17.8105 20.7099 17.8105 20.2957V19.9838H6.18555V20.2957C6.18555 20.7099 5.84976 21.0457 5.43555 21.0457C5.02133 21.0457 4.68555 20.7099 4.68555 20.2957V19.9838H3.3C2.58203 19.9838 2 19.4018 2 18.6838V6.3C2 5.58203 2.58203 5 3.3 5H20.7ZM20.5 16.0509V18.4838H3.5V6.5H20.5V8.93202H19.1875C18.7733 8.93202 18.4375 9.26781 18.4375 9.68202C18.4375 10.0962 18.7733 10.432 19.1875 10.432H20.5V14.5509H19.1875C18.7733 14.5509 18.4375 14.8867 18.4375 15.3009C18.4375 15.7152 18.7733 16.0509 19.1875 16.0509H20.5Z" class="tw-fill-primary-600" />
|
||||
</svg>
|
||||
`;
|
||||
@@ -60,26 +60,26 @@ export const WithContent: Story = {
|
||||
<bit-nav-group
|
||||
text="Level 1 - with children (empty)"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-group>
|
||||
<bit-nav-item
|
||||
text="Level 1 - no children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-item>
|
||||
<bit-nav-group
|
||||
text="Level 1 - with children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
>
|
||||
<bit-nav-group
|
||||
text="Level 2 - with children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
>
|
||||
@@ -91,7 +91,7 @@ export const WithContent: Story = {
|
||||
<bit-nav-group
|
||||
text="Level 3 - with children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
>
|
||||
@@ -105,48 +105,48 @@ export const WithContent: Story = {
|
||||
<bit-nav-group
|
||||
text="Level 2 - with children (empty)"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
></bit-nav-group>
|
||||
<bit-nav-item
|
||||
text="Level 2 - no children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
<bit-nav-item
|
||||
text="Level 1 - no children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
<bit-nav-group text="Tree B" icon="bwi-collection" [open]="true">
|
||||
<bit-nav-group text="Tree B" icon="bwi-collection-shared" [open]="true">
|
||||
<bit-nav-group
|
||||
text="Level 1 - with children (empty)"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-group>
|
||||
<bit-nav-item
|
||||
text="Level 1 - no children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-item>
|
||||
<bit-nav-group
|
||||
text="Level 1 - with children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
>
|
||||
<bit-nav-group
|
||||
text="Level 2 - with children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
>
|
||||
@@ -158,7 +158,7 @@ export const WithContent: Story = {
|
||||
<bit-nav-group
|
||||
text="Level 3 - with children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
>
|
||||
@@ -172,21 +172,21 @@ export const WithContent: Story = {
|
||||
<bit-nav-group
|
||||
text="Level 2 - with children (empty)"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
></bit-nav-group>
|
||||
<bit-nav-item
|
||||
text="Level 2 - no children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
<bit-nav-item
|
||||
text="Level 1 - no children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
@@ -194,26 +194,26 @@ export const WithContent: Story = {
|
||||
<bit-nav-group
|
||||
text="Level 1 - with children (empty)"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-group>
|
||||
<bit-nav-item
|
||||
text="Level 1 - no children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-item>
|
||||
<bit-nav-group
|
||||
text="Level 1 - with children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
>
|
||||
<bit-nav-group
|
||||
text="Level 2 - with children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
>
|
||||
@@ -225,7 +225,7 @@ export const WithContent: Story = {
|
||||
<bit-nav-group
|
||||
text="Level 3 - with children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
>
|
||||
@@ -239,21 +239,21 @@ export const WithContent: Story = {
|
||||
<bit-nav-group
|
||||
text="Level 2 - with children (empty)"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
></bit-nav-group>
|
||||
<bit-nav-item
|
||||
text="Level 2 - no children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
<bit-nav-item
|
||||
text="Level 1 - no children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
@@ -277,35 +277,35 @@ export const Secondary: Story = {
|
||||
template: /* HTML */ `
|
||||
<bit-layout>
|
||||
<bit-side-nav variant="secondary">
|
||||
<bit-nav-item text="Item A" icon="bwi-collection"></bit-nav-item>
|
||||
<bit-nav-item text="Item B" icon="bwi-collection"></bit-nav-item>
|
||||
<bit-nav-item text="Item A" icon="bwi-collection-shared"></bit-nav-item>
|
||||
<bit-nav-item text="Item B" icon="bwi-collection-shared"></bit-nav-item>
|
||||
<bit-nav-divider></bit-nav-divider>
|
||||
<bit-nav-item text="Item C" icon="bwi-collection"></bit-nav-item>
|
||||
<bit-nav-item text="Item D" icon="bwi-collection"></bit-nav-item>
|
||||
<bit-nav-group text="Tree example" icon="bwi-collection" [open]="true">
|
||||
<bit-nav-item text="Item C" icon="bwi-collection-shared"></bit-nav-item>
|
||||
<bit-nav-item text="Item D" icon="bwi-collection-shared"></bit-nav-item>
|
||||
<bit-nav-group text="Tree example" icon="bwi-collection-shared" [open]="true">
|
||||
<bit-nav-group
|
||||
text="Level 1 - with children (empty)"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-group>
|
||||
<bit-nav-item
|
||||
text="Level 1 - no children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-item>
|
||||
<bit-nav-group
|
||||
text="Level 1 - with children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
>
|
||||
<bit-nav-group
|
||||
text="Level 2 - with children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
>
|
||||
@@ -317,7 +317,7 @@ export const Secondary: Story = {
|
||||
<bit-nav-group
|
||||
text="Level 3 - with children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
>
|
||||
@@ -331,21 +331,21 @@ export const Secondary: Story = {
|
||||
<bit-nav-group
|
||||
text="Level 2 - with children (empty)"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
></bit-nav-group>
|
||||
<bit-nav-item
|
||||
text="Level 2 - no children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
<bit-nav-item
|
||||
text="Level 1 - no children"
|
||||
route="#"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
|
||||
@@ -19,7 +19,7 @@ export abstract class NavBaseComponent {
|
||||
@Input() ariaLabel: string;
|
||||
|
||||
/**
|
||||
* Optional icon, e.g. `"bwi-collection"`
|
||||
* Optional icon, e.g. `"bwi-collection-shared"`
|
||||
*/
|
||||
@Input() icon: string;
|
||||
|
||||
|
||||
@@ -117,20 +117,20 @@ export const Tree: StoryObj<NavGroupComponent> = {
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-side-nav>
|
||||
<bit-nav-group text="Tree example" icon="bwi-collection" [open]="true">
|
||||
<bit-nav-group text="Level 1 - with children (empty)" route="t1" icon="bwi-collection" variant="tree"></bit-nav-group>
|
||||
<bit-nav-item text="Level 1 - no children" route="t2" icon="bwi-collection" variant="tree"></bit-nav-item>
|
||||
<bit-nav-group text="Level 1 - with children" route="t3" icon="bwi-collection" variant="tree" [open]="true">
|
||||
<bit-nav-group text="Level 2 - with children" route="t4" icon="bwi-collection" variant="tree" [open]="true">
|
||||
<bit-nav-group text="Tree example" icon="bwi-collection-shared" [open]="true">
|
||||
<bit-nav-group text="Level 1 - with children (empty)" route="t1" icon="bwi-collection-shared" variant="tree"></bit-nav-group>
|
||||
<bit-nav-item text="Level 1 - no children" route="t2" icon="bwi-collection-shared" variant="tree"></bit-nav-item>
|
||||
<bit-nav-group text="Level 1 - with children" route="t3" icon="bwi-collection-shared" variant="tree" [open]="true">
|
||||
<bit-nav-group text="Level 2 - with children" route="t4" icon="bwi-collection-shared" variant="tree" [open]="true">
|
||||
<bit-nav-item text="Level 3 - no children, no icon" route="t5" variant="tree"></bit-nav-item>
|
||||
<bit-nav-group text="Level 3 - with children" route="t6" icon="bwi-collection" variant="tree" [open]="true">
|
||||
<bit-nav-group text="Level 3 - with children" route="t6" icon="bwi-collection-shared" variant="tree" [open]="true">
|
||||
<bit-nav-item text="Level 4 - no children, no icon" route="t7" variant="tree"></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
</bit-nav-group>
|
||||
<bit-nav-group text="Level 2 - with children (empty)" route="t8" icon="bwi-collection" variant="tree" [open]="true"></bit-nav-group>
|
||||
<bit-nav-item text="Level 2 - no children" route="t9" icon="bwi-collection" variant="tree"></bit-nav-item>
|
||||
<bit-nav-group text="Level 2 - with children (empty)" route="t8" icon="bwi-collection-shared" variant="tree" [open]="true"></bit-nav-group>
|
||||
<bit-nav-item text="Level 2 - no children" route="t9" icon="bwi-collection-shared" variant="tree"></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
<bit-nav-item text="Level 1 - no children" route="t10" icon="bwi-collection" variant="tree"></bit-nav-item>
|
||||
<bit-nav-item text="Level 1 - no children" route="t10" icon="bwi-collection-shared" variant="tree"></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
</bit-side-nav>
|
||||
`,
|
||||
|
||||
@@ -71,7 +71,7 @@ export const WithoutIcon: Story = {
|
||||
export const WithoutRoute: Story = {
|
||||
render: () => ({
|
||||
template: `
|
||||
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
|
||||
<bit-nav-item text="Hello World" icon="bwi-collection-shared"></bit-nav-item>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
@@ -80,7 +80,7 @@ export const WithChildButtons: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<bit-nav-item text="Hello World" [route]="['']" icon="bwi-collection">
|
||||
<bit-nav-item text="Hello World" [route]="['']" icon="bwi-collection-shared">
|
||||
<button
|
||||
slot="end"
|
||||
class="tw-ml-auto"
|
||||
@@ -106,11 +106,11 @@ export const MultipleItemsWithDivider: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
|
||||
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
|
||||
<bit-nav-item text="Hello World" icon="bwi-collection-shared"></bit-nav-item>
|
||||
<bit-nav-item text="Hello World" icon="bwi-collection-shared"></bit-nav-item>
|
||||
<bit-nav-divider></bit-nav-divider>
|
||||
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
|
||||
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
|
||||
<bit-nav-item text="Hello World" icon="bwi-collection-shared"></bit-nav-item>
|
||||
<bit-nav-item text="Hello World" icon="bwi-collection-shared"></bit-nav-item>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
@@ -119,9 +119,9 @@ export const ForceActiveStyles: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<bit-nav-item text="First Nav" icon="bwi-collection"></bit-nav-item>
|
||||
<bit-nav-item text="Active Nav" icon="bwi-collection" [forceActiveStyles]="true"></bit-nav-item>
|
||||
<bit-nav-item text="Third Nav" icon="bwi-collection"></bit-nav-item>
|
||||
<bit-nav-item text="First Nav" icon="bwi-collection-shared"></bit-nav-item>
|
||||
<bit-nav-item text="Active Nav" icon="bwi-collection-shared" [forceActiveStyles]="true"></bit-nav-item>
|
||||
<bit-nav-item text="Third Nav" icon="bwi-collection-shared"></bit-nav-item>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
||||
@@ -49,10 +49,10 @@ export const Default: Story = {
|
||||
<bit-form-field>
|
||||
<bit-label>Choose a value</bit-label>
|
||||
<bit-select [disabled]="disabled">
|
||||
<bit-option value="value1" label="Value 1" icon="bwi-collection"></bit-option>
|
||||
<bit-option value="value2" label="Value 2" icon="bwi-collection"></bit-option>
|
||||
<bit-option value="value3" label="Value 3" icon="bwi-collection"></bit-option>
|
||||
<bit-option value="value4" label="Value 4" icon="bwi-collection" disabled></bit-option>
|
||||
<bit-option value="value1" label="Value 1" icon="bwi-collection-shared"></bit-option>
|
||||
<bit-option value="value2" label="Value 2" icon="bwi-collection-shared"></bit-option>
|
||||
<bit-option value="value3" label="Value 3" icon="bwi-collection-shared"></bit-option>
|
||||
<bit-option value="value4" label="Value 4" icon="bwi-collection-shared" disabled></bit-option>
|
||||
</bit-select>
|
||||
</bit-form-field>
|
||||
`,
|
||||
|
||||
@@ -1,168 +0,0 @@
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
|
||||
<Meta title="Documentation/Icons" />
|
||||
|
||||
# Iconography
|
||||
|
||||
Avoid using icons to convey information unless paired with meaningful, clear text. If an icon must
|
||||
be used and text cannot be displayed visually along with the icon, use an `aria-label` to provide
|
||||
the text to screen readers, and a `title` attribute to provide the text visually through a tool tip.
|
||||
Note: this pattern should only be followed for very common iconography such as, a settings cog icon
|
||||
or an options menu icon.
|
||||
|
||||
## Status Indicators
|
||||
|
||||
| Icon | bwi-name | Usage |
|
||||
| -------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <i class="bwi bwi-check"></i> | bwi-check | confirmation action (Example: "confirm member"), successful confirmation (toast or callout), or shows currently selected option in a menu. Use with success color variable if applicable. |
|
||||
| <i class="bwi bwi-error"></i> | bwi-error | error; used in form field error states and error toasts, banners, and callouts. Do not use as a close or clear icon. Use with danger color variable. |
|
||||
| <i class="bwi bwi-exclamation-triangle"></i> | bwi-exclamation-triangle | warning; used in warning callouts, banners, and toasts. Use with warning color variable. |
|
||||
| <i class="bwi bwi-info-circle"></i> | bwi-info-circle | information; used in info callouts, banners, and toasts. Use with info color variable. |
|
||||
| <i class="bwi bwi-question-circle"></i> | bwi-question-circle | link to help documentation or hover tooltip |
|
||||
| <i class="bwi bwi-spinner"></i> | bwi-spinner | loading |
|
||||
|
||||
## Bitwarden Objects
|
||||
|
||||
| Icon | bwi-name | Usage |
|
||||
| ----------------------------------- | --------------- | --------------------------------------------------- |
|
||||
| <i class="bwi bwi-business"></i> | bwi-business | organization or vault for Free, Teams or Enterprise |
|
||||
| <i class="bwi bwi-collection"></i> | bwi-collection | collection |
|
||||
| <i class="bwi bwi-credit-card"></i> | bwi-credit-card | card item type |
|
||||
| <i class="bwi bwi-family"></i> | bwi-family | family vault or organization |
|
||||
| <i class="bwi bwi-folder"></i> | bwi-folder | folder |
|
||||
| <i class="bwi bwi-globe"></i> | bwi-globe | login item type |
|
||||
| <i class="bwi bwi-id-card"></i> | bwi-id-card | identity item type |
|
||||
| <i class="bwi bwi-send"></i> | bwi-send | send action or feature |
|
||||
| <i class="bwi bwi-send-f"></i> | bwi-send-f | - |
|
||||
| <i class="bwi bwi-sticky-note"></i> | bwi-sticky-note | secure note item type |
|
||||
| <i class="bwi bwi-users"></i> | bwi-users | user group |
|
||||
| <i class="bwi bwi-vault"></i> | bwi-vault | general vault |
|
||||
| <i class="bwi bwi-vault-f"></i> | bwi-vault-f | general vault |
|
||||
|
||||
## Actions
|
||||
|
||||
| Icon | bwi-name | Usage |
|
||||
| -------------------------------------- | ------------------ | -------------------------------------------- |
|
||||
| <i class="bwi bwi-check-circle"></i> | bwi-check-circle | check if password has been exposed |
|
||||
| <i class="bwi bwi-clone"></i> | bwi-clone | copy to clipboard action |
|
||||
| <i class="bwi bwi-close"></i> | bwi-close | close action |
|
||||
| <i class="bwi bwi-cog"></i> | bwi-cog | settings |
|
||||
| <i class="bwi bwi-cog-f"></i> | bwi-cog-f | settings |
|
||||
| <i class="bwi bwi-download"></i> | bwi-download | download or export |
|
||||
| <i class="bwi bwi-envelope"></i> | bwi-envelope | action related to emailing a user |
|
||||
| <i class="bwi bwi-external-link"></i> | bwi-external-link | open in new window or popout |
|
||||
| <i class="bwi bwi-eye"></i> | bwi-eye | show icon for password fields |
|
||||
| <i class="bwi bwi-eye-slash"></i> | bwi-eye-slash | hide icon for password fields |
|
||||
| <i class="bwi bwi-files"></i> | bwi-files | clone action / duplicate an item |
|
||||
| <i class="bwi bwi-generate"></i> | bwi-generate | generate action in edit item forms |
|
||||
| <i class="bwi bwi-generate-f"></i> | bwi-generate-f | generate feature or action |
|
||||
| <i class="bwi bwi-lock"></i> | bwi-lock | lock vault action |
|
||||
| <i class="bwi bwi-lock-encrypted"></i> | bwi-lock-encrypted | - |
|
||||
| <i class="bwi bwi-lock-f"></i> | bwi-lock-f | - |
|
||||
| <i class="bwi bwi-minus-circle"></i> | bwi-minus-circle | remove action |
|
||||
| <i class="bwi bwi-pencil-square"></i> | bwi-pencil-square | edit action |
|
||||
| <i class="bwi bwi-popout"></i> | bwi-popout | popout action |
|
||||
| <i class="bwi bwi-plus"></i> | bwi-plus | new or add option in contained buttons/links |
|
||||
| <i class="bwi bwi-plus-f"></i> | bwi-plus-f | new or add option in contained buttons/links |
|
||||
| <i class="bwi bwi-plus-circle"></i> | bwi-plus-circle | new or add option in text buttons/links |
|
||||
| <i class="bwi bwi-refresh"></i> | bwi-refresh | "re"-action; such as refresh or regenerate |
|
||||
| <i class="bwi bwi-save"></i> | bwi-save | alternate download action |
|
||||
| <i class="bwi bwi-search"></i> | bwi-search | search action |
|
||||
| <i class="bwi bwi-share"></i> | bwi-share | - |
|
||||
| <i class="bwi bwi-sign-in"></i> | bwi-sign-in | sign-in action |
|
||||
| <i class="bwi bwi-sign-out"></i> | bwi-sign-out | sign-out action |
|
||||
| <i class="bwi bwi-star"></i> | bwi-star | favorite action |
|
||||
| <i class="bwi bwi-star-f"></i> | bwi-star-f | favorited / unfavorite action |
|
||||
| <i class="bwi bwi-trash"></i> | bwi-trash | delete action or trash area |
|
||||
| <i class="bwi bwi-undo"></i> | bwi-undo | restore action |
|
||||
| <i class="bwi bwi-unlock"></i> | bwi-unlock | unlocked |
|
||||
|
||||
## Directional and Menu Indicators
|
||||
|
||||
| Icon | bwi-name | Usage |
|
||||
| ------------------------------------- | ----------------- | ------------------------------------------------------- |
|
||||
| <i class="bwi bwi-angle-down"></i> | bwi-angle-down | closed dropdown or open expandable section |
|
||||
| <i class="bwi bwi-angle-left"></i> | bwi-angle-left | - |
|
||||
| <i class="bwi bwi-angle-right"></i> | bwi-angle-right | closed expandable section |
|
||||
| <i class="bwi bwi-angle-up"></i> | bwi-angle-up | open dropdown |
|
||||
| <i class="bwi bwi-back"></i> | bwi-back | back arrow |
|
||||
| <i class="bwi bwi-down-solid"></i> | bwi-down-solid | table sort order |
|
||||
| <i class="bwi bwi-ellipsis-h"></i> | bwi-ellipsis-h | more options menu horizontal; used in mobile list items |
|
||||
| <i class="bwi bwi-ellipsis-v"></i> | bwi-ellipsis-v | more options menu vertical; used primarily in tables |
|
||||
| <i class="bwi bwi-filter"></i> | bwi-filter | Product switcher |
|
||||
| <i class="bwi bwi-hamburger"></i> | bwi-hamburger | navigation indicator |
|
||||
| <i class="bwi bwi-list"></i> | bwi-list | toggle list/grid view |
|
||||
| <i class="bwi bwi-list-alt"></i> | bwi-list-alt | view item action in extension |
|
||||
| <i class="bwi bwi-numbered-list"></i> | bwi-numbered-list | toggle numbered list view |
|
||||
| <i class="bwi bwi-up-down-btn"></i> | bwi-up-down-btn | table sort order |
|
||||
| <i class="bwi bwi-up-solid"></i> | bwi-up-solid | table sort order |
|
||||
|
||||
## Misc Objects
|
||||
|
||||
| Icon | bwi-name | Usage |
|
||||
| ---------------------------------------- | -------------------- | ---------------------------------------------- |
|
||||
| <i class="bwi bwi-billing"></i> | bwi-billing | billing options |
|
||||
| <i class="bwi bwi-bitcoin"></i> | bwi-bitcoin | crypto |
|
||||
| <i class="bwi bwi-browser"></i> | bwi-browser | web browser |
|
||||
| <i class="bwi bwi-browser-alt"></i> | bwi-browser-alt | web browser |
|
||||
| <i class="bwi bwi-bug"></i> | bwi-bug | test or debug action |
|
||||
| <i class="bwi bwi-camera"></i> | bwi-camera | actions related to camera use |
|
||||
| <i class="bwi bwi-cli"></i> | bwi-cli | cli client or code |
|
||||
| <i class="bwi bwi-clock"></i> | bwi-clock | use for time based actions or views |
|
||||
| <i class="bwi bwi-community"></i> | bwi-community | - |
|
||||
| <i class="bwi bwi-desktop"></i> | bwi-desktop | desktop client |
|
||||
| <i class="bwi bwi-dollar"></i> | bwi-dollar | account credit |
|
||||
| <i class="bwi bwi-file"></i> | bwi-file | file related objects or actions |
|
||||
| <i class="bwi bwi-file-text"></i> | bwi-file-text | text related objects or actions |
|
||||
| <i class="bwi bwi-hashtag"></i> | bwi-hashtag | link to specific id |
|
||||
| <i class="bwi bwi-key"></i> | bwi-key | key or password related objects or actions |
|
||||
| <i class="bwi bwi-link"></i> | bwi-link | link action |
|
||||
| <i class="bwi bwi-mobile"></i> | bwi-mobile | mobile client |
|
||||
| <i class="bwi bwi-msp"></i> | bwi-msp | - |
|
||||
| <i class="bwi bwi-paperclip"></i> | bwi-paperclip | attachments |
|
||||
| <i class="bwi bwi-passkey"></i> | bwi-passkey | passkey |
|
||||
| <i class="bwi bwi-pencil"></i> | bwi-pencil | editing |
|
||||
| <i class="bwi bwi-provider"></i> | bwi-provider | relates to provider or provider portal |
|
||||
| <i class="bwi bwi-puzzle"></i> | bwi-puzzle | - |
|
||||
| <i class="bwi bwi-shield"></i> | bwi-shield | - |
|
||||
| <i class="bwi bwi-sliders"></i> | bwi-sliders | reporting or filtering |
|
||||
| <i class="bwi bwi-tag"></i> | bwi-tag | labels |
|
||||
| <i class="bwi bwi-totp-codes"></i> | bwi-totp-codes | - |
|
||||
| <i class="bwi bwi-totp-codes-alt"></i> | bwi-totp-codes-alt | - |
|
||||
| <i class="bwi bwi-totp-codes-alt2"></i> | bwi-totp-codes-alt2 | - |
|
||||
| <i class="bwi bwi-universal-access"></i> | bwi-universal-access | use for accessibility related actions |
|
||||
| <i class="bwi bwi-user"></i> | bwi-user | relates to current user or organization member |
|
||||
| <i class="bwi bwi-user-monitor"></i> | bwi-user-monitor | - |
|
||||
| <i class="bwi bwi-wireless"></i> | bwi-wireless | - |
|
||||
| <i class="bwi bwi-wrench"></i> | bwi-wrench | tools or additional configuration options |
|
||||
|
||||
## Platforms and Logos
|
||||
|
||||
| Icon | bwi-name | Usage |
|
||||
| ---------------------------------- | -------------- | ---------------------------- |
|
||||
| <i class="bwi bwi-android"></i> | bwi-android | android support |
|
||||
| <i class="bwi bwi-apple"></i> | bwi-apple | apple/IOS support |
|
||||
| <i class="bwi bwi-brave"></i> | bwi-brave | - |
|
||||
| <i class="bwi bwi-chrome"></i> | bwi-chrome | chrome support |
|
||||
| <i class="bwi bwi-discourse"></i> | bwi-discourse | community forum |
|
||||
| <i class="bwi bwi-duckduckgo"></i> | bwi-duckduckgo | - |
|
||||
| <i class="bwi bwi-edge"></i> | bwi-edge | edge support |
|
||||
| <i class="bwi bwi-facebook"></i> | bwi-facebook | link to our facebook page |
|
||||
| <i class="bwi bwi-firefox"></i> | bwi-firefox | support for firefox |
|
||||
| <i class="bwi bwi-github"></i> | bwi-github | link to our github page |
|
||||
| <i class="bwi bwi-google"></i> | bwi-google | link to our google page |
|
||||
| <i class="bwi bwi-instagram"></i> | bwi-instagram | link to our Instagram page |
|
||||
| <i class="bwi bwi-linkedin"></i> | bwi-linkedin | link to our linkedIn page |
|
||||
| <i class="bwi bwi-linux"></i> | bwi-linux | linux support |
|
||||
| <i class="bwi bwi-mastodon"></i> | bwi-mastodon | link to our Mastodon page |
|
||||
| <i class="bwi bwi-opera"></i> | bwi-opera | support for Opera |
|
||||
| <i class="bwi bwi-paypal"></i> | bwi-paypal | PayPal |
|
||||
| <i class="bwi bwi-reddit"></i> | bwi-reddit | link to our reddit community |
|
||||
| <i class="bwi bwi-safari"></i> | bwi-safari | safari support |
|
||||
| <i class="bwi bwi-twitch"></i> | bwi-twitch | link to our Twitch page |
|
||||
| <i class="bwi bwi-twitter"></i> | bwi-twitter | link to our twitter page |
|
||||
| <i class="bwi bwi-tor"></i> | bwi-tor | - |
|
||||
| <i class="bwi bwi-vivaldi"></i> | bwi-vivaldi | - |
|
||||
| <i class="bwi bwi-windows"></i> | bwi-windows | support for windows |
|
||||
| <i class="bwi bwi-x-twitter"></i> | bwi-x-twitter | x version of twitter |
|
||||
| <i class="bwi bwi-youtube"></i> | bwi-youtube | link to our youtube page |
|
||||
413
libs/components/src/stories/icons/icon-data.ts
Normal file
413
libs/components/src/stories/icons/icon-data.ts
Normal file
@@ -0,0 +1,413 @@
|
||||
const statusIndicators = [
|
||||
{
|
||||
id: "bwi-check",
|
||||
usage:
|
||||
"confirmation action (Example: 'confirm member'), successful confirmation (toast or callout), or shows currently selected option in a menu. Use with success color variable if applicable.",
|
||||
},
|
||||
{
|
||||
id: "bwi-error",
|
||||
usage:
|
||||
"error; used in form field error states and error toasts, banners, and callouts. Do not use as a close or clear icon. Use with danger color variable.",
|
||||
},
|
||||
{
|
||||
id: "bwi-exclamation-triangle",
|
||||
usage:
|
||||
"warning; used in warning callouts, banners, and toasts. Use with warning color variable.",
|
||||
},
|
||||
{
|
||||
id: "bwi-info-circle",
|
||||
usage: "information; used in info callouts, banners, and toasts. Use with info color variable.",
|
||||
},
|
||||
{
|
||||
id: "bwi-question-circle",
|
||||
usage: "link to help documentation or hover tooltip",
|
||||
},
|
||||
{
|
||||
id: "bwi-spinner",
|
||||
usage: "loading",
|
||||
},
|
||||
];
|
||||
|
||||
const bitwardenObjects = [
|
||||
{
|
||||
id: "bwi-business",
|
||||
usage: "organization or vault for Free, Teams or Enterprise",
|
||||
},
|
||||
{
|
||||
id: "bwi-collection",
|
||||
usage: "collection",
|
||||
},
|
||||
{
|
||||
id: "bwi-collection-shared",
|
||||
usage: "collection",
|
||||
},
|
||||
{
|
||||
id: "bwi-credit-card",
|
||||
usage: "card item type",
|
||||
},
|
||||
{
|
||||
id: "bwi-family",
|
||||
usage: "family vault or organization",
|
||||
},
|
||||
{
|
||||
id: "bwi-folder",
|
||||
usage: "folder",
|
||||
},
|
||||
{
|
||||
id: "bwi-globe",
|
||||
usage: "login item type",
|
||||
},
|
||||
{
|
||||
id: "bwi-id-card",
|
||||
usage: "identity item type",
|
||||
},
|
||||
{
|
||||
id: "bwi-send",
|
||||
usage: "send action or feature",
|
||||
},
|
||||
{
|
||||
id: "bwi-sticky-note",
|
||||
usage: "secure note item type",
|
||||
},
|
||||
{
|
||||
id: "bwi-users",
|
||||
usage: "user group",
|
||||
},
|
||||
{
|
||||
id: "bwi-vault",
|
||||
usage: "general vault",
|
||||
},
|
||||
];
|
||||
|
||||
const actions = [
|
||||
{
|
||||
id: "bwi-archive",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-check-circle",
|
||||
usage: "check if password has been exposed",
|
||||
},
|
||||
{
|
||||
id: "bwi-clone",
|
||||
usage: "copy to clipboard action",
|
||||
},
|
||||
{
|
||||
id: "bwi-close",
|
||||
usage: "close action",
|
||||
},
|
||||
{
|
||||
id: "bwi-cog",
|
||||
usage: "settings",
|
||||
},
|
||||
{
|
||||
id: "bwi-cog-f",
|
||||
usage: "settings",
|
||||
},
|
||||
{
|
||||
id: "bwi-download",
|
||||
usage: "download or ",
|
||||
},
|
||||
{
|
||||
id: "bwi-envelope",
|
||||
usage: "action related to emailing a user",
|
||||
},
|
||||
{
|
||||
id: "bwi-external-link",
|
||||
usage: "open in new window or popout",
|
||||
},
|
||||
{
|
||||
id: "bwi-eye",
|
||||
usage: "show icon for password fields",
|
||||
},
|
||||
{
|
||||
id: "bwi-eye-slash",
|
||||
usage: "hide icon for password fields",
|
||||
},
|
||||
{
|
||||
id: "bwi-files",
|
||||
usage: "clone action / duplicate an item",
|
||||
},
|
||||
{
|
||||
id: "bwi-generate",
|
||||
usage: "generate action in edit item forms",
|
||||
},
|
||||
{
|
||||
id: "bwi-import",
|
||||
usage: "import a file",
|
||||
},
|
||||
{
|
||||
id: "bwi-lock",
|
||||
usage: "lock vault action",
|
||||
},
|
||||
{
|
||||
id: "bwi-lock-encrypted",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-lock-f",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-minus-circle",
|
||||
usage: "remove action",
|
||||
},
|
||||
{
|
||||
id: "bwi-pencil-square",
|
||||
usage: "edit action",
|
||||
},
|
||||
{
|
||||
id: "bwi-popout",
|
||||
usage: "popout action",
|
||||
},
|
||||
{
|
||||
id: "bwi-plus",
|
||||
usage: "new or add option in contained buttons/links",
|
||||
},
|
||||
{
|
||||
id: "bwi-plus-circle",
|
||||
usage: "new or add option in text buttons/links",
|
||||
},
|
||||
{
|
||||
id: "bwi-refresh",
|
||||
usage: '"re"-action; such as refresh or regenerate',
|
||||
},
|
||||
{
|
||||
id: "bwi-search",
|
||||
usage: "search action",
|
||||
},
|
||||
{
|
||||
id: "bwi-share",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-sign-in",
|
||||
usage: "sign-in action",
|
||||
},
|
||||
{
|
||||
id: "bwi-sign-out",
|
||||
usage: "sign-out action",
|
||||
},
|
||||
{
|
||||
id: "bwi-star",
|
||||
usage: "favorite action",
|
||||
},
|
||||
{
|
||||
id: "bwi-star-f",
|
||||
usage: "favorited / unfavorite action",
|
||||
},
|
||||
{
|
||||
id: "bwi-trash",
|
||||
usage: "delete action or trash area",
|
||||
},
|
||||
{
|
||||
id: "bwi-undo",
|
||||
usage: "restore action",
|
||||
},
|
||||
{
|
||||
id: "bwi-unlock",
|
||||
usage: "unlocked",
|
||||
},
|
||||
];
|
||||
|
||||
const directionalMenuIndicators = [
|
||||
{
|
||||
id: "bwi-angle-down",
|
||||
usage: "closed dropdown or open expandable section",
|
||||
},
|
||||
{
|
||||
id: "bwi-angle-left",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-angle-right",
|
||||
usage: "closed expandable section",
|
||||
},
|
||||
{
|
||||
id: "bwi-angle-up",
|
||||
usage: "open dropdown",
|
||||
},
|
||||
{
|
||||
id: "bwi-down-solid",
|
||||
usage: "table sort order",
|
||||
},
|
||||
{
|
||||
id: "bwi-drag-and-drop",
|
||||
usage: "drag and drop handle",
|
||||
},
|
||||
{
|
||||
id: "bwi-ellipsis-h",
|
||||
usage: "more options menu horizontal; used in mobile list items",
|
||||
},
|
||||
{
|
||||
id: "bwi-ellipsis-v",
|
||||
usage: "more options menu vertical; used primarily in tables",
|
||||
},
|
||||
{
|
||||
id: "bwi-filter",
|
||||
usage: "Product switcher",
|
||||
},
|
||||
{
|
||||
id: "bwi-list",
|
||||
usage: "toggle list/grid view",
|
||||
},
|
||||
{
|
||||
id: "bwi-list-alt",
|
||||
usage: "view item action in extension",
|
||||
},
|
||||
{
|
||||
id: "bwi-numbered-list",
|
||||
usage: "toggle numbered list view",
|
||||
},
|
||||
{
|
||||
id: "bwi-up-down-btn",
|
||||
usage: "table sort order",
|
||||
},
|
||||
{
|
||||
id: "bwi-up-solid",
|
||||
usage: "table sort order",
|
||||
},
|
||||
];
|
||||
|
||||
const miscObjects = [
|
||||
{
|
||||
id: "bwi-bell",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-billing",
|
||||
usage: "billing options",
|
||||
},
|
||||
{
|
||||
id: "bwi-browser",
|
||||
usage: "web browser",
|
||||
},
|
||||
{
|
||||
id: "bwi-browser-alt",
|
||||
usage: "web browser",
|
||||
},
|
||||
{
|
||||
id: "bwi-brush",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-bug",
|
||||
usage: "test or debug action",
|
||||
},
|
||||
{
|
||||
id: "bwi-camera",
|
||||
usage: "actions related to camera use",
|
||||
},
|
||||
{
|
||||
id: "bwi-cli",
|
||||
usage: "cli client or code",
|
||||
},
|
||||
{
|
||||
id: "bwi-clock",
|
||||
usage: "use for time based actions or views",
|
||||
},
|
||||
{
|
||||
id: "bwi-desktop",
|
||||
usage: "desktop client",
|
||||
},
|
||||
{
|
||||
id: "bwi-dollar",
|
||||
usage: "account credit",
|
||||
},
|
||||
{
|
||||
id: "bwi-file",
|
||||
usage: "file related objects or actions",
|
||||
},
|
||||
{
|
||||
id: "bwi-file-text",
|
||||
usage: "text related objects or actions",
|
||||
},
|
||||
{
|
||||
id: "bwi-hashtag",
|
||||
usage: "link to specific id",
|
||||
},
|
||||
{
|
||||
id: "bwi-key",
|
||||
usage: "key or password related objects or actions",
|
||||
},
|
||||
{
|
||||
id: "bwi-mobile",
|
||||
usage: "mobile client",
|
||||
},
|
||||
{
|
||||
id: "bwi-msp",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-paperclip",
|
||||
usage: "attachments",
|
||||
},
|
||||
{
|
||||
id: "bwi-passkey",
|
||||
usage: "passkey",
|
||||
},
|
||||
{
|
||||
id: "bwi-pencil",
|
||||
usage: "editing",
|
||||
},
|
||||
{
|
||||
id: "bwi-provider",
|
||||
usage: "relates to provider or provider portal",
|
||||
},
|
||||
{
|
||||
id: "bwi-puzzle",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-shield",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-sliders",
|
||||
usage: "reporting or filtering",
|
||||
},
|
||||
{
|
||||
id: "bwi-tag",
|
||||
usage: "labels",
|
||||
},
|
||||
{
|
||||
id: "bwi-universal-access",
|
||||
usage: "use for accessibility related actions",
|
||||
},
|
||||
{
|
||||
id: "bwi-user",
|
||||
usage: "relates to current user or organization member",
|
||||
},
|
||||
{
|
||||
id: "bwi-user-monitor",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-wireless",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-wrench",
|
||||
usage: "tools or additional configuration options",
|
||||
},
|
||||
];
|
||||
|
||||
const platformsAndLogos = [
|
||||
{
|
||||
id: "bwi-bitcoin",
|
||||
usage: "crypto",
|
||||
},
|
||||
{
|
||||
id: "bwi-paypal",
|
||||
usage: "PayPal",
|
||||
},
|
||||
];
|
||||
|
||||
export const IconStoryData = {
|
||||
platformsAndLogos,
|
||||
actions,
|
||||
bitwardenObjects,
|
||||
statusIndicators,
|
||||
directionalMenuIndicators,
|
||||
miscObjects,
|
||||
};
|
||||
59
libs/components/src/stories/icons/icons.mdx
Normal file
59
libs/components/src/stories/icons/icons.mdx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
|
||||
import * as stories from "./icons.stories";
|
||||
|
||||
<Meta title="Documentation/Icons" />
|
||||
|
||||
# Iconography
|
||||
|
||||
Bitwarden has a suite of presentational icons available for use, as well as a few helper classes for
|
||||
sizing and rotation.
|
||||
|
||||
Icons use the `bwi` class, as well as an additional `bwi-*` class to indicate which icon will be
|
||||
rendered.
|
||||
|
||||
Example basic usage:
|
||||
|
||||
```
|
||||
<i class="bwi bwi-check"></i>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Avoid using icons to convey information unless paired with meaningful, clear text. If an icon must
|
||||
be used and text cannot be displayed visually along with the icon, use an `aria-label` to provide
|
||||
the text to screen readers, and a `title` attribute to provide the text visually through a tool tip.
|
||||
Note: this pattern should only be followed for very common iconography such as a settings cog icon
|
||||
or an options menu icon.
|
||||
|
||||
## Status Indicators
|
||||
|
||||
<Canvas of={stories.StatusIcons} />
|
||||
|
||||
## Bitwarden Objects
|
||||
|
||||
<Canvas of={stories.BitwardenObjects} />
|
||||
|
||||
## Actions
|
||||
|
||||
<Canvas of={stories.Actions} />
|
||||
|
||||
## Directional and Menu Indicators
|
||||
|
||||
<Canvas of={stories.DirectionalMenuIndicators} />
|
||||
|
||||
## Misc Objects
|
||||
|
||||
<Canvas of={stories.MiscObjects} />
|
||||
|
||||
## Platforms and Logos
|
||||
|
||||
<Canvas of={stories.PlatformsAndLogos} />
|
||||
|
||||
## Size Variants
|
||||
|
||||
<Canvas of={stories.SizeVariants} />
|
||||
|
||||
## Rotation Variants
|
||||
|
||||
<Canvas of={stories.RotationVariants} />
|
||||
215
libs/components/src/stories/icons/icons.stories.ts
Normal file
215
libs/components/src/stories/icons/icons.stories.ts
Normal file
@@ -0,0 +1,215 @@
|
||||
import { Meta, moduleMetadata } from "@storybook/angular";
|
||||
|
||||
import { TableDataSource, TableModule } from "../../table";
|
||||
|
||||
import { IconStoryData } from "./icon-data";
|
||||
|
||||
type IconWithUsage = {
|
||||
id: string;
|
||||
usage: string;
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Documentation / Icons",
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [TableModule],
|
||||
}),
|
||||
],
|
||||
} as Meta;
|
||||
|
||||
const statusIconData = new TableDataSource<IconWithUsage>();
|
||||
statusIconData.data = IconStoryData.statusIndicators;
|
||||
|
||||
export const StatusIcons = {
|
||||
render: (args: { dataSource: typeof statusIconData }) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-table [dataSource]="dataSource">
|
||||
<ng-container header>
|
||||
<tr>
|
||||
<th bitCell>Icon</th>
|
||||
<th bitCell>Icon Class</th>
|
||||
<th bitCell>Usage</th>
|
||||
</tr>
|
||||
</ng-container>
|
||||
<ng-template body let-rows$>
|
||||
@for (row of rows$ | async; track row.id) {
|
||||
<tr bitRow alignContent="middle">
|
||||
<td bitCell><i class="bwi" [ngClass]="row.id"></i> </td>
|
||||
<td bitCell><code>{{row.id}}</code></td>
|
||||
<td bitCell>{{row.usage}}</td>
|
||||
</tr>
|
||||
}
|
||||
</ng-template>
|
||||
</bit-table>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
dataSource: statusIconData,
|
||||
},
|
||||
};
|
||||
|
||||
const bitwardenObjectsData = new TableDataSource<IconWithUsage>();
|
||||
bitwardenObjectsData.data = IconStoryData.bitwardenObjects;
|
||||
|
||||
export const BitwardenObjects = {
|
||||
...StatusIcons,
|
||||
args: {
|
||||
dataSource: bitwardenObjectsData,
|
||||
},
|
||||
};
|
||||
|
||||
const actionsData = new TableDataSource<IconWithUsage>();
|
||||
actionsData.data = IconStoryData.actions;
|
||||
|
||||
export const Actions = {
|
||||
...StatusIcons,
|
||||
args: {
|
||||
dataSource: actionsData,
|
||||
},
|
||||
};
|
||||
|
||||
const directionalMenuIndicatorsData = new TableDataSource<IconWithUsage>();
|
||||
directionalMenuIndicatorsData.data = IconStoryData.directionalMenuIndicators;
|
||||
|
||||
export const DirectionalMenuIndicators = {
|
||||
...StatusIcons,
|
||||
args: {
|
||||
dataSource: directionalMenuIndicatorsData,
|
||||
},
|
||||
};
|
||||
|
||||
const miscObjectsData = new TableDataSource<IconWithUsage>();
|
||||
miscObjectsData.data = IconStoryData.miscObjects;
|
||||
|
||||
export const MiscObjects = {
|
||||
...StatusIcons,
|
||||
args: {
|
||||
dataSource: miscObjectsData,
|
||||
},
|
||||
};
|
||||
|
||||
const platformsAndLogosData = new TableDataSource<IconWithUsage>();
|
||||
platformsAndLogosData.data = IconStoryData.platformsAndLogos;
|
||||
|
||||
export const PlatformsAndLogos = {
|
||||
...StatusIcons,
|
||||
args: {
|
||||
dataSource: platformsAndLogosData,
|
||||
},
|
||||
};
|
||||
|
||||
const sizeData = new TableDataSource<{
|
||||
size: string;
|
||||
usage: string;
|
||||
}>();
|
||||
|
||||
sizeData.data = [
|
||||
{
|
||||
size: "",
|
||||
usage: "default size",
|
||||
},
|
||||
{
|
||||
size: "bwi-sm",
|
||||
usage: "reduce font size to 0.875em",
|
||||
},
|
||||
{
|
||||
size: "bwi-lg",
|
||||
usage: "increase font size to ~1.33em",
|
||||
},
|
||||
{
|
||||
size: "bwi-2x",
|
||||
usage: "increase font size to 2em",
|
||||
},
|
||||
{
|
||||
size: "bwi-3x",
|
||||
usage: "increase font size to 3em",
|
||||
},
|
||||
{
|
||||
size: "bwi-4x",
|
||||
usage: "increase font size to 4em",
|
||||
},
|
||||
{
|
||||
size: "bwi-fw",
|
||||
usage: "set fixed width of ~1.3em and text-align center",
|
||||
},
|
||||
];
|
||||
|
||||
export const SizeVariants = {
|
||||
render: (args: { dataSource: typeof sizeData }) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-table [dataSource]="dataSource">
|
||||
<ng-container header>
|
||||
<tr>
|
||||
<th bitCell>Icon</th>
|
||||
<th bitCell>Size Class</th>
|
||||
<th bitCell>Class notes</th>
|
||||
</tr>
|
||||
</ng-container>
|
||||
<ng-template body let-rows$>
|
||||
@for (row of rows$ | async; track row.size) {
|
||||
<tr bitRow alignContent="middle">
|
||||
<td bitCell><i class="bwi bwi-plus" [ngClass]="row.size"></i> </td>
|
||||
<td bitCell><code>{{row.size}}</code></td>
|
||||
<td bitCell>{{row.usage}}</td>
|
||||
</tr>
|
||||
}
|
||||
</ng-template>
|
||||
</bit-table>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
dataSource: sizeData,
|
||||
},
|
||||
};
|
||||
|
||||
const rotationData = new TableDataSource<{
|
||||
class: string;
|
||||
usage: string;
|
||||
}>();
|
||||
|
||||
rotationData.data = [
|
||||
{
|
||||
class: "",
|
||||
usage: "default",
|
||||
},
|
||||
{
|
||||
class: "bwi-rotate-270",
|
||||
usage: "rotate by 270 degrees",
|
||||
},
|
||||
{
|
||||
class: "bwi-spin",
|
||||
usage: "animated spin",
|
||||
},
|
||||
];
|
||||
|
||||
export const RotationVariants = {
|
||||
render: (args: { dataSource: typeof rotationData }) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-table [dataSource]="dataSource">
|
||||
<ng-container header>
|
||||
<tr>
|
||||
<th bitCell>Icon</th>
|
||||
<th bitCell>Size Class</th>
|
||||
<th bitCell>Class notes</th>
|
||||
</tr>
|
||||
</ng-container>
|
||||
<ng-template body let-rows$>
|
||||
@for (row of rows$ | async; track row.class) {
|
||||
<tr bitRow alignContent="middle">
|
||||
<td bitCell><i class="bwi bwi-lock" [ngClass]="row.class"></i> </td>
|
||||
<td bitCell><code>{{row.class}}</code></td>
|
||||
<td bitCell>{{row.usage}}</td>
|
||||
</tr>
|
||||
}
|
||||
</ng-template>
|
||||
</bit-table>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
dataSource: rotationData,
|
||||
},
|
||||
};
|
||||
@@ -172,7 +172,7 @@ export class KitchenSinkMainComponent {
|
||||
}
|
||||
|
||||
navItems = [
|
||||
{ icon: "bwi-collection", name: "Password Managers", route: "/" },
|
||||
{ icon: "bwi-collection", name: "Favorites", route: "/" },
|
||||
{ icon: "bwi-collection-shared", name: "Password Managers", route: "/" },
|
||||
{ icon: "bwi-collection-shared", name: "Favorites", route: "/" },
|
||||
];
|
||||
}
|
||||
|
||||
@@ -84,8 +84,13 @@ export const Default: Story = {
|
||||
props: args,
|
||||
template: /* HTML */ `<bit-layout>
|
||||
<bit-side-nav>
|
||||
<bit-nav-group text="Password Managers" icon="bwi-collection" [open]="true">
|
||||
<bit-nav-group text="Favorites" icon="bwi-collection" variant="tree" [open]="true">
|
||||
<bit-nav-group text="Password Managers" icon="bwi-collection-shared" [open]="true">
|
||||
<bit-nav-group
|
||||
text="Favorites"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
>
|
||||
<bit-nav-item text="Bitwarden" route="bitwarden"></bit-nav-item>
|
||||
<bit-nav-divider></bit-nav-divider>
|
||||
</bit-nav-group>
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
*ngFor="let c of collections$ | async"
|
||||
[value]="c"
|
||||
[label]="c.name"
|
||||
icon="bwi-collection"
|
||||
icon="bwi-collection-shared"
|
||||
/>
|
||||
</ng-container>
|
||||
</bit-select>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<button bitButton size="small" [bitMenuTriggerFor]="itemOptions" buttonType="primary" type="button">
|
||||
<i *ngIf="!hideIcon" class="bwi bwi-plus-f" aria-hidden="true"></i>
|
||||
<i *ngIf="!hideIcon" class="bwi bwi-plus" aria-hidden="true"></i>
|
||||
{{ (hideIcon ? "createSend" : "new") | i18n }}
|
||||
</button>
|
||||
<bit-menu #itemOptions>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<div class="tw-flex tw-items-center tw-ml-1.5">
|
||||
<button
|
||||
type="button"
|
||||
bitIconButton="bwi-hamburger"
|
||||
bitIconButton="bwi-drag-and-drop"
|
||||
class="!tw-py-0 !tw-px-1"
|
||||
cdkDragHandle
|
||||
[appA11yTitle]="'reorderToggleButton' | i18n: uriLabel"
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
|
||||
<button
|
||||
type="button"
|
||||
bitIconButton="bwi-hamburger"
|
||||
bitIconButton="bwi-drag-and-drop"
|
||||
class="tw-self-center tw-mt-2"
|
||||
cdkDragHandle
|
||||
[appA11yTitle]="'reorderToggleButton' | i18n: field.value.name"
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
bitIconButton="bwi-paste"
|
||||
bitIconButton="bwi-import"
|
||||
bitSuffix
|
||||
data-testid="import-privateKey"
|
||||
*ngIf="showImport"
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
[attr.aria-label]="collection.name"
|
||||
>
|
||||
<i
|
||||
class="bwi bwi-collection bwi-lg"
|
||||
class="bwi bwi-collection-shared bwi-lg"
|
||||
aria-hidden="true"
|
||||
[title]="'collection' | i18n"
|
||||
></i>
|
||||
|
||||
@@ -304,7 +304,7 @@ export class AssignCollectionsComponent implements OnInit, OnDestroy, AfterViewI
|
||||
return collection.canEditItems(org);
|
||||
})
|
||||
.map((c) => ({
|
||||
icon: "bwi-collection",
|
||||
icon: "bwi-collection-shared",
|
||||
id: c.id,
|
||||
labelName: c.name,
|
||||
listName: c.name,
|
||||
@@ -317,7 +317,7 @@ export class AssignCollectionsComponent implements OnInit, OnDestroy, AfterViewI
|
||||
if (this.params.activeCollection) {
|
||||
this.selectCollections([
|
||||
{
|
||||
icon: "bwi-collection",
|
||||
icon: "bwi-collection-shared",
|
||||
id: this.params.activeCollection.id,
|
||||
labelName: this.params.activeCollection.name,
|
||||
listName: this.params.activeCollection.name,
|
||||
@@ -345,7 +345,7 @@ export class AssignCollectionsComponent implements OnInit, OnDestroy, AfterViewI
|
||||
collection.id !== this.params.activeCollection?.id,
|
||||
)
|
||||
.map((collection) => ({
|
||||
icon: "bwi-collection",
|
||||
icon: "bwi-collection-shared",
|
||||
id: collection.id,
|
||||
labelName: collection.labelName,
|
||||
listName: collection.listName,
|
||||
@@ -409,7 +409,7 @@ export class AssignCollectionsComponent implements OnInit, OnDestroy, AfterViewI
|
||||
)
|
||||
.subscribe((collections) => {
|
||||
this.availableCollections = collections.map((c) => ({
|
||||
icon: "bwi-collection",
|
||||
icon: "bwi-collection-shared",
|
||||
id: c.id,
|
||||
labelName: c.name,
|
||||
listName: c.name,
|
||||
|
||||
Reference in New Issue
Block a user