mirror of
https://github.com/bitwarden/browser
synced 2025-12-06 00:13:28 +00:00
[PM-19781] Lit Components icons cleanup (#14294)
* update icon shapes to match new design system icons * add AngleUpIcon to storybook * rename Family icon to Users to match design system naming conventions * add Collection icon * move illustrations to their own path/category to match design system convention * remove hardcoded PartyHorn illustration size * fix swapped story names * rename PartyHorn illustration to Celebrate to match design system convention * update Warning illustration to use new design system shape
This commit is contained in:
Jonathan Prusik
GitHub
@@ -4,7 +4,7 @@ import { html } from "lit";
|
||||
import { Theme } from "@bitwarden/common/platform/enums";
|
||||
|
||||
import { themes } from "../../../content/components/constants/styles";
|
||||
import { Business, Family } from "../../../content/components/icons";
|
||||
import { Business, Users } from "../../../content/components/icons";
|
||||
|
||||
// @TODO connect data source to icon checks
|
||||
// @TODO support other indicator types (attachments, etc)
|
||||
@@ -19,7 +19,7 @@ export function CipherInfoIndicatorIcons({
|
||||
}) {
|
||||
const indicatorIcons = [
|
||||
...(showBusinessIcon ? [Business({ color: themes[theme].text.muted, theme })] : []),
|
||||
...(showFamilyIcon ? [Family({ color: themes[theme].text.muted, theme })] : []),
|
||||
...(showFamilyIcon ? [Users({ color: themes[theme].text.muted, theme })] : []),
|
||||
];
|
||||
|
||||
return indicatorIcons.length
|
||||
|
||||
@@ -8,10 +8,10 @@ export function AngleDown({ color, disabled, theme }: IconProps) {
|
||||
const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
|
||||
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12" fill="none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8" fill="none">
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
d="M12.004 11.244a2.705 2.705 0 0 1-1.75-.644L.266 2.154a.76.76 0 0 1-.263-.51.75.75 0 0 1 1.233-.637l9.99 8.445a1.186 1.186 0 0 0 1.565 0l10-8.54a.751.751 0 0 1 .973 1.141l-10 8.538a2.703 2.703 0 0 1-1.76.653Z"
|
||||
d="M13.53.47a.75.75 0 0 0-1.06 0L7 5.94 1.53.47A.75.75 0 1 0 .47 1.53l6 6a.75.75 0 0 0 1.06 0l6-6a.75.75 0 0 0 0-1.06Z"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
@@ -8,15 +8,10 @@ export function AngleUp({ color, disabled, theme }: IconProps) {
|
||||
const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
|
||||
|
||||
return html`
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 12"
|
||||
fill="none"
|
||||
style="transform: scaleY(-1);"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8" fill="none">
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
d="M12.004 11.244a2.705 2.705 0 0 1-1.75-.644L.266 2.154a.76.76 0 0 1-.263-.51.75.75 0 0 1 1.233-.637l9.99 8.445a1.186 1.186 0 0 0 1.565 0l10-8.54a.751.751 0 0 1 .973 1.141l-10 8.538a2.703 2.703 0 0 1-1.76.653Z"
|
||||
d="M.47 7.53a.75.75 0 0 0 1.06 0L7 2.06l5.47 5.47a.75.75 0 1 0 1.06-1.06l-6-6a.75.75 0 0 0-1.06 0l-6 6a.75.75 0 0 0 0 1.06Z"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
@@ -8,30 +8,17 @@ export function Business({ color, disabled, theme }: IconProps) {
|
||||
const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
|
||||
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 16" fill="none">
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
fill-rule="evenodd"
|
||||
d="M6.015 16.482a3.007 3.007 0 1 0 0-6.015 3.007 3.007 0 0 0 0 6.015Zm0 1.504a4.51 4.51 0 1 0 0-9.022 4.51 4.51 0 0 0 0 9.022Z"
|
||||
clip-rule="evenodd"
|
||||
d="M3.25 3a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5ZM7.25 3a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5ZM7.25 6a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5ZM6.5 9.75A.75.75 0 0 1 7.25 9h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75ZM2.5 6.75A.75.75 0 0 1 3.25 6h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75ZM3.25 9a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5Z"
|
||||
/>
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
fill-rule="evenodd"
|
||||
d="M10.439 22.497c-.548-2.805-2.51-4.511-4.427-4.511-1.917 0-3.879 1.706-4.426 4.51h8.853Zm-8.934.525v-.002.002ZM.659 24h10.466c.645 0 .984-.424.888-1.18-.457-3.591-2.97-6.338-6-6.338-3.032 0-5.544 2.747-6.001 6.339-.066.511.143 1.18.647 1.18Z"
|
||||
d="M1 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1Zm.5 1.5v13H4V13a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.5h2.5v-13h-9Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
fill-rule="evenodd"
|
||||
d="M7.46 1.387v7.577a.694.694 0 1 1-1.387 0V.97c0-.536.434-.971.97-.971H23.03c.536 0 .971.435.971.971v20.496a.971.971 0 0 1-.971.971h-11a.694.694 0 0 1 0-1.387h10.584V1.387H7.46Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.stroke))}
|
||||
stroke-linecap="round"
|
||||
d="M14.033 3.953h2.007M9.522 3.953h2.007M18.544 3.953h2.007M14.033 8.464h2.007M9.522 8.464h2.007M18.544 8.464h2.007M14.033 12.975h2.007M9.522 12.975h2.007M18.544 12.975h2.007M14.033 17.485h2.007M18.544 17.485h2.007"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -8,10 +8,10 @@ export function Close({ color, disabled, theme }: IconProps) {
|
||||
const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
|
||||
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none">
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
d="m19.809 19.21-8.487-8.226a.592.592 0 0 1 0-.852l8.382-8.13a.594.594 0 0 0 .175-.423.593.593 0 0 0-.182-.42.632.632 0 0 0-.872-.007l-8.383 8.126a.634.634 0 0 1-.88 0l-8.41-8.135a.642.642 0 0 0-.887-.008.602.602 0 0 0-.182.431.588.588 0 0 0 .19.428l8.41 8.139a.592.592 0 0 1 0 .852l-8.5 8.225a.605.605 0 0 0-.183.427c0 .16.066.313.183.426a.635.635 0 0 0 .88-.001l8.5-8.226a.635.635 0 0 1 .88 0l8.488 8.226a.64.64 0 0 0 .887.008.605.605 0 0 0 .182-.43.591.591 0 0 0-.19-.429h-.001Z"
|
||||
d="M.22.22a.75.75 0 0 1 1.06 0L7 5.94 12.72.22a.75.75 0 1 1 1.06 1.06L8.06 7l5.72 5.72a.75.75 0 1 1-1.06 1.06L7 8.06l-5.72 5.72a.75.75 0 0 1-1.06-1.06L5.94 7 .22 1.28a.75.75 0 0 1 0-1.06Z"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import { css } from "@emotion/css";
|
||||
import { html } from "lit";
|
||||
|
||||
import { IconProps } from "../common-types";
|
||||
import { buildIconColorRule, ruleNames, themes } from "../constants/styles";
|
||||
|
||||
export function Collection({ color, disabled, theme }: IconProps) {
|
||||
const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
|
||||
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none">
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
d="M3.5.75A.75.75 0 0 1 4.25 0h5.5a.75.75 0 0 1 0 1.5h-5.5A.75.75 0 0 1 3.5.75ZM2.25 2a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5Z"
|
||||
/>
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
fill-rule="evenodd"
|
||||
d="M12 4a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10Zm0 1.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h10Z"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
@@ -8,10 +8,20 @@ export function ExclamationTriangle({ color, disabled, theme }: IconProps) {
|
||||
const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
|
||||
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22" fill="none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" fill="none">
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
d="M21.627 21.877H2.373a2.28 2.28 0 0 1-1.195-.326 2.394 2.394 0 0 1-.869-.908 2.433 2.433 0 0 1 .015-2.404L9.951 1.33c.211-.368.511-.672.87-.883a2.322 2.322 0 0 1 2.357 0c.36.211.66.515.871.882l9.627 16.911a2.442 2.442 0 0 1 .015 2.404 2.39 2.39 0 0 1-.87.908c-.362.217-.775.33-1.194.326ZM12 1.677a.844.844 0 0 0-.436.115.883.883 0 0 0-.322.326l-9.625 16.91a.846.846 0 0 0 0 .844.876.876 0 0 0 .322.334.84.84 0 0 0 .44.117h19.248a.837.837 0 0 0 .44-.117.882.882 0 0 0 .322-.334.846.846 0 0 0 0-.843L12.758 2.118a.89.89 0 0 0-.322-.326.837.837 0 0 0-.436-.114Zm0 13.309a.735.735 0 0 1-.53-.228.794.794 0 0 1-.22-.55V7.105a.79.79 0 0 1 .22-.55.735.735 0 0 1 1.06 0c.14.146.22.344.22.55v7.105a.79.79 0 0 1-.22.55.74.74 0 0 1-.53.227Zm0 3.84c.491 0 .89-.412.89-.92 0-.51-.399-.922-.89-.922s-.89.412-.89.921c0 .51.399.922.89.922Z"
|
||||
d="M9 11C9 11.5523 8.55229 12 8 12C7.44772 12 7 11.5523 7 11C7 10.4477 7.44772 10 8 10C8.55229 10 9 10.4477 9 11Z"
|
||||
/>
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
d="M7.31639 5C7.01564 5 6.78295 5.26359 6.82025 5.56202L7.19525 8.56202C7.22653 8.81223 7.43923 9 7.69139 9H8.30861C8.56077 9 8.77347 8.81223 8.80475 8.56202L9.17975 5.56202C9.21705 5.26359 8.98436 5 8.68361 5H7.31639Z"
|
||||
/>
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M9.37384 1.01584C8.76324 -0.04174 7.23675 -0.041739 6.62616 1.01584L0.2149 12.1205C-0.395695 13.1781 0.36755 14.5 1.58874 14.5H14.4113C15.6325 14.5 16.3957 13.1781 15.7851 12.1205L9.37384 1.01584ZM14.4861 12.8705L8.0748 1.76584C8.06066 1.74135 8.05029 1.7355 8.04562 1.73291C8.03694 1.7281 8.02122 1.72266 8 1.72266C7.97878 1.72266 7.96305 1.7281 7.95438 1.73291C7.94971 1.7355 7.93934 1.74135 7.9252 1.76584L1.51394 12.8705C1.4998 12.895 1.49992 12.9069 1.50001 12.9122C1.50018 12.9221 1.50333 12.9385 1.51394 12.9568C1.52455 12.9752 1.53713 12.9861 1.54563 12.9912C1.55021 12.994 1.56046 13 1.58874 13H14.4113C14.4395 13 14.4498 12.994 14.4544 12.9912C14.4629 12.9861 14.4754 12.9752 14.4861 12.9568C14.4967 12.9385 14.4998 12.9221 14.5 12.9122C14.5001 12.9069 14.5002 12.895 14.4861 12.8705Z"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
import { css } from "@emotion/css";
|
||||
import { html } from "lit";
|
||||
|
||||
import { IconProps } from "../common-types";
|
||||
import { buildIconColorRule, ruleNames, themes } from "../constants/styles";
|
||||
|
||||
export function Family({ color, disabled, theme }: IconProps) {
|
||||
const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
|
||||
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 18" fill="none">
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
d="M20.535 8.219a4.5 4.5 0 1 0-5.07 0c-.34.187-.657.414-.945.675a3 3 0 0 0-5.04 0 5.745 5.745 0 0 0-.945-.675 4.5 4.5 0 1 0-5.07 0A7.5 7.5 0 0 0 0 13.829C0 14.34.135 15 .645 15H8.07a6.6 6.6 0 0 0-.57 2.055c0 .405.105.945.48.945h7.83c.48 0 .735-.345.66-.945A7.503 7.503 0 0 0 15.93 15h7.17c.645 0 .975-.42.885-1.17a7.5 7.5 0 0 0-3.45-5.61ZM15 4.499a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-3 4.5a1.5 1.5 0 0 1 1.5 1.11c.016.13.016.26 0 .39a1.5 1.5 0 0 1-.99 1.395 1.29 1.29 0 0 1-1.02 0 1.5 1.5 0 0 1-.99-1.395 1.778 1.778 0 0 1 0-.39A1.5 1.5 0 0 1 12 9Zm-9-4.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1.425 9C2.13 10.71 4.08 9 6.075 9A4.035 4.035 0 0 1 9 10.499a3 3 0 0 0 .945 2.145A4.499 4.499 0 0 0 9 13.5H1.575Zm13.29 3h-5.73A5.07 5.07 0 0 1 9.75 15 2.865 2.865 0 0 1 12 13.5h.15a2.82 2.82 0 0 1 2.16 1.5c.27.465.457.972.555 1.5Zm.135-3a4.5 4.5 0 0 0-.945-.825A3 3 0 0 0 15 10.5 4.08 4.08 0 0 1 18 9a5.01 5.01 0 0 1 4.41 4.5H15Z"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
@@ -8,10 +8,11 @@ export function Folder({ color, disabled, theme }: IconProps) {
|
||||
const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
|
||||
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 13" fill="none">
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
d="M12.705 2.813h-4.65a.48.48 0 0 1-.34-.155.509.509 0 0 1-.134-.355v-.231a1.354 1.354 0 0 0-.378-.947 1.291 1.291 0 0 0-.92-.397H1.296a1.291 1.291 0 0 0-.919.398A1.354 1.354 0 0 0 0 2.072v9.847c-.002.354.134.694.377.947.244.252.574.394.92.397l11.406.01a1.255 1.255 0 0 0 .907-.384 1.35 1.35 0 0 0 .39-.963V4.158c0-.353-.136-.693-.378-.945a1.296 1.296 0 0 0-.917-.4ZM1.297 1.562h4.988c.13.004.251.06.34.155a.504.504 0 0 1 .134.355v.231c0 .354.136.694.38.946.242.251.573.394.919.398h4.649c.128.004.25.059.34.154.089.096.137.223.134.355v.995a.326.326 0 0 1-.196.296.308.308 0 0 1-.12.024H1.139a.31.31 0 0 1-.223-.093.326.326 0 0 1-.092-.227V2.07a.506.506 0 0 1 .133-.355.479.479 0 0 1 .34-.155Zm11.734 10.735a.456.456 0 0 1-.325.139l-11.409-.008a.48.48 0 0 1-.34-.154.504.504 0 0 1-.133-.355V6.63a.33.33 0 0 1 .092-.227.32.32 0 0 1 .222-.094h11.727a.31.31 0 0 1 .223.094c.06.06.093.142.093.227v5.299a.527.527 0 0 1-.15.367Z"
|
||||
d="M2 0a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8L6.586.586A2 2 0 0 0 5.172 0H2Zm5.379 3.5L5.525 1.646a.5.5 0 0 0-.353-.146H2a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V4a.5.5 0 0 0-.5-.5H7.379Z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
@@ -8,11 +8,10 @@ export function Globe({ color, disabled, theme }: IconProps) {
|
||||
const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
|
||||
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
fill-rule="evenodd"
|
||||
d="M19.958 18.85A10.476 10.476 0 0 1 12 22.5c-1.674 0-3.256-.392-4.66-1.088l.084-.195c.03-.07.06-.135.084-.194l.086-.2c.11-.262.23-.548.372-.832.18-.36.374-.67.58-.875.035-.035.137-.096.372-.146.225-.049.512-.076.855-.095.187-.01.392-.018.607-.026.542-.02 1.15-.043 1.72-.118.426-.057.769-.169 1.025-.349.27-.19.422-.44.477-.713a1.531 1.531 0 0 0-.04-.697 3.99 3.99 0 0 0-.162-.458l-.014-.037a5.335 5.335 0 0 0-.198-.425c-.17-.34-.321-.64-.39-1.395-.04-.442.122-.939.34-1.463l.121-.283c.069-.158.137-.317.191-.456.086-.22.174-.482.174-.728 0-.242-.077-.5-.18-.731a3.271 3.271 0 0 0-.434-.704c-.335-.416-.863-.86-1.485-.86-.597 0-1.367.217-2.02.473-.334.13-.652.278-.922.425-.262.143-.507.3-.67.46-1.262 1.236-2.01 1.593-2.458 1.619-.376.021-.649-.194-.999-.676-.085-.117-.168-.24-.257-.373l-.01-.014c-.084-.126-.174-.26-.268-.39-.192-.269-.42-.55-.708-.771a1.946 1.946 0 0 0-1.085-.416 2.206 2.206 0 0 0-.393.011 10.477 10.477 0 0 1 2.7-5.06c.074.44.198.804.369 1.1.311.54.762.822 1.258.921.55.11 1.163-.08 1.711-.277.17-.062.337-.126.505-.19.42-.16.84-.321 1.287-.439.35-.092.788-.073 1.3.017.36.062.72.151 1.088.242.16.04.323.08.488.119.515.12 1.063.228 1.542.19.51-.041.996-.254 1.27-.802.171-.343.168-.67.03-.966-.117-.253-.324-.457-.475-.604-.352-.344-.558-.55-.558-.881 0-.161.05-.258.122-.338.086-.095.219-.18.411-.272.08-.039.162-.075.25-.114l.048-.02c.102-.046.214-.097.32-.153.064-.033.133-.072.202-.119 2.628.96 4.765 2.941 5.932 5.462a12.186 12.186 0 0 0-.043-.005c-.514-.06-1.002-.07-1.442.08-.463.158-.82.472-1.111.951a9.428 9.428 0 0 1-.628.862 82.02 82.02 0 0 0-.13.165c-.281.362-.585.765-.788 1.182-.204.42-.332.908-.191 1.418.14.512.524.95 1.136 1.332.134.085.304.145.427.188l.027.01c.146.052.264.095.363.15a.422.422 0 0 1 .17.147c.021.038.05.112.029.264a7.15 7.15 0 0 0-.07 1.33c.022.375.096.759.295 1.04.16.224.162.542.147 1.01v.014c-.007.198-.015.447.029.666.03.149.089.312.203.45Zm1.843.075A11.945 11.945 0 0 0 24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 4.495 2.471 8.413 6.13 10.468v.12h.218A11.946 11.946 0 0 0 12 24c4.011 0 7.563-1.968 9.742-4.991a.73.73 0 0 0 .065-.08l-.006-.004Zm-15.253 2.05.059-.135.074-.17.078-.185c.11-.262.246-.584.403-.896.193-.387.439-.803.749-1.111.222-.221.532-.327.818-.388a6.64 6.64 0 0 1 .994-.114c.22-.012.445-.02.672-.029.525-.02 1.062-.039 1.587-.108.346-.046.532-.127.626-.193.081-.057.103-.108.112-.155a.653.653 0 0 0-.027-.285c-.032-.12-.078-.234-.128-.358l-.014-.035a3.953 3.953 0 0 0-.141-.298c-.183-.362-.422-.837-.508-1.776-.063-.685.187-1.366.406-1.892l.137-.32c.062-.143.117-.27.166-.398.085-.218.113-.34.113-.402 0-.066-.025-.192-.102-.364a2.38 2.38 0 0 0-.314-.507c-.283-.352-.58-.524-.783-.524-.427 0-1.07.167-1.692.41-.303.12-.587.251-.82.378-.24.131-.397.242-.47.314-1.271 1.244-2.23 1.827-3.036 1.873-.878.05-1.406-.532-1.78-1.045-.095-.132-.188-.27-.275-.4l-.006-.01c-.087-.13-.17-.252-.255-.371-.176-.245-.344-.442-.527-.583a1.047 1.047 0 0 0-.592-.23 1.54 1.54 0 0 0-.495.058 10.494 10.494 0 0 0 4.971 10.25Zm14.072-2.978c0-.07.002-.15.005-.247l.002-.059c.014-.392.036-1.01-.314-1.502-.05-.07-.111-.244-.13-.572a6.267 6.267 0 0 1 .063-1.158c.042-.314-.005-.595-.142-.833a1.308 1.308 0 0 0-.51-.481 3.197 3.197 0 0 0-.497-.213l-.004-.001a1.74 1.74 0 0 1-.278-.112c-.501-.314-.686-.592-.746-.809-.06-.217-.02-.468.134-.786.156-.321.403-.656.689-1.022l.119-.152.001-.002c.242-.308.5-.636.696-.958.206-.339.41-.491.632-.567.244-.084.566-.094 1.048-.038.192.023.372.05.537.08.373 1.077.575 2.232.575 3.435 0 2.23-.695 4.297-1.88 5.997ZM14.33 1.759C13.58 1.59 12.8 1.5 12 1.5c-2.567 0-4.918.92-6.742 2.45.033.693.163 1.14.325 1.42.177.306.401.438.655.489.272.054.657-.035 1.228-.242.14-.05.29-.107.447-.167.434-.166.925-.354 1.422-.485.541-.143 1.133-.096 1.685 0 .392.068.802.17 1.184.264.153.038.301.074.442.107.52.122.942.195 1.265.17.294-.024.443-.12.537-.307.053-.107.037-.147.02-.185-.038-.08-.12-.175-.289-.34a12.25 12.25 0 0 0-.059-.056c-.295-.285-.77-.743-.77-1.468 0-.393.138-.704.356-.944.186-.204.418-.343.624-.447Z"
|
||||
d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 14.5c.23 0 .843-.226 1.487-1.514.524-1.048.906-2.526.994-4.236H5.519c.088 1.71.47 3.188.994 4.236C7.157 14.274 7.77 14.5 8 14.5ZM5.52 7.25h4.96c-.087-1.71-.47-3.188-.993-4.236C8.843 1.726 8.23 1.5 8 1.5c-.23 0-.843.226-1.487 1.514C5.99 4.062 5.607 5.54 5.52 7.25Zm6.463 0h2.474a6.506 6.506 0 0 0-3.766-5.168c.718 1.305 1.197 3.125 1.292 5.168Zm-7.966 0c.095-2.043.574-3.863 1.292-5.168A6.506 6.506 0 0 0 1.543 7.25h2.474Zm7.966 1.5c-.095 2.043-.574 3.863-1.292 5.168a6.506 6.506 0 0 0 3.766-5.168h-2.474Zm-6.677 5.185c-.718-1.305-1.197-3.125-1.292-5.168H1.54a6.506 6.506 0 0 0 3.766 5.168Z"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
@@ -3,14 +3,12 @@ export { AngleUp } from "./angle-up";
|
||||
export { BrandIconContainer } from "./brand-icon-container";
|
||||
export { Business } from "./business";
|
||||
export { Close } from "./close";
|
||||
export { Collection } from "./collection";
|
||||
export { ExclamationTriangle } from "./exclamation-triangle";
|
||||
export { ExternalLink } from "./external-link";
|
||||
export { Family } from "./family";
|
||||
export { Folder } from "./folder";
|
||||
export { Globe } from "./globe";
|
||||
export { Keyhole } from "./keyhole";
|
||||
export { PartyHorn } from "./party-horn";
|
||||
export { PencilSquare } from "./pencil-square";
|
||||
export { Shield } from "./shield";
|
||||
export { User } from "./user";
|
||||
export { Warning } from "./warning";
|
||||
export { Users } from "./users";
|
||||
|
||||
@@ -8,10 +8,14 @@ export function PencilSquare({ color, disabled, theme }: IconProps) {
|
||||
const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
|
||||
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="none">
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
d="M17.799 24H2.709a2.422 2.422 0 0 1-1.729-.735 2.533 2.533 0 0 1-.715-1.768V6.03c0-.663.257-1.299.715-1.769a2.416 2.416 0 0 1 1.728-.734h7.996c.216 0 .424.088.577.244a.846.846 0 0 1 0 1.18.808.808 0 0 1-.577.245H2.708a.809.809 0 0 0-.576.244.844.844 0 0 0-.238.59v15.467c0 .221.085.433.238.59.153.156.36.244.576.244h15.09a.809.809 0 0 0 .577-.244.843.843 0 0 0 .238-.59v-6.754a.832.832 0 0 1 .494-.801.796.796 0 0 1 .64 0 .82.82 0 0 1 .442.472.836.836 0 0 1 .052.33v6.753a2.53 2.53 0 0 1-.715 1.768c-.458.47-1.08.734-1.727.735ZM9.24 15.417a.812.812 0 0 1-.677-.373.852.852 0 0 1-.074-.783l1.32-3.239c.121-.297.297-.567.52-.795L19.615.714A2.394 2.394 0 0 1 21.325 0c.638.002 1.25.263 1.703.726.452.463.706 1.09.707 1.744a2.502 2.502 0 0 1-.7 1.746l-9.229 9.455c-.274.28-.609.489-.977.61l-3.34 1.09a.801.801 0 0 1-.248.047Zm12.084-13.76a.771.771 0 0 0-.558.235l-9.282 9.514a.828.828 0 0 0-.17.26l-.642 1.572 1.663-.543a.778.778 0 0 0 .317-.198l9.231-9.455a.812.812 0 0 0 .172-.88.805.805 0 0 0-.29-.363.78.78 0 0 0-.44-.136v-.006h-.001Z"
|
||||
d="M11.013.677a1.75 1.75 0 0 1 2.474 0l.836.836a1.75 1.75 0 0 1 0 2.475L9.03 9.28a.75.75 0 0 1-.348.197l-3 .75a.75.75 0 0 1-.91-.91l.75-3a.75.75 0 0 1 .198-.348L11.013.677Zm1.414 1.06a.25.25 0 0 0-.354 0l-.646.647a.75.75 0 0 1 .103.086l1 1a.751.751 0 0 1 .087.103l.646-.646a.25.25 0 0 0 0-.353l-.836-.836Zm-.854 2.88a.752.752 0 0 1-.103-.087l-1-1a.756.756 0 0 1-.087-.103L6.928 6.884 6.531 8.47l1.586-.397 3.456-3.456Z"
|
||||
/>
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
d="M2.75 2.5c-.69 0-1.25.56-1.25 1.25v8.5c0 .69.56 1.25 1.25 1.25h8.5c.69 0 1.25-.56 1.25-1.25v-3.5a.75.75 0 0 1 1.5 0v3.5A2.75 2.75 0 0 1 11.25 15h-8.5A2.75 2.75 0 0 1 0 12.25v-8.5A2.75 2.75 0 0 1 2.75 1h3.5a.75.75 0 0 1 0 1.5h-3.5Z"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
@@ -8,10 +8,10 @@ export function Shield({ color, theme }: IconProps) {
|
||||
const shapeColor = color || themes[theme].brandLogo;
|
||||
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 24" fill="none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16" fill="none">
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
d="M19.703.3A.97.97 0 0 0 19 0H1a.958.958 0 0 0-.702.3.962.962 0 0 0-.3.702v12c.004.913.18 1.818.522 2.665a9.95 9.95 0 0 0 1.297 2.345c.552.72 1.169 1.387 1.844 1.993a21.721 21.721 0 0 0 1.975 1.61c.6.426 1.23.83 1.89 1.21.66.381 1.126.639 1.398.773.275.135.497.241.662.312.129.062.27.093.414.09a.87.87 0 0 0 .406-.095c.168-.073.387-.177.665-.312.277-.135.75-.393 1.398-.772.648-.38 1.285-.785 1.89-1.21.69-.499 1.35-1.036 1.978-1.61a14.458 14.458 0 0 0 1.844-1.994c.535-.72.972-1.508 1.297-2.344a7.185 7.185 0 0 0 .522-2.666v-12A.944.944 0 0 0 19.703.3Zm-2.32 12.811c0 4.35-7.382 8.087-7.382 8.087V2.57h7.381v10.54Z"
|
||||
d="M13.469.2A.647.647 0 0 0 13 0H1a.639.639 0 0 0-.468.2.641.641 0 0 0-.2.468v8a4.81 4.81 0 0 0 .348 1.777c.216.557.507 1.083.865 1.563.367.48.779.925 1.229 1.329.417.383.857.741 1.317 1.073.4.284.82.553 1.26.807.44.254.75.425.932.515.183.09.33.16.44.208.087.041.181.062.277.06a.58.58 0 0 0 .27-.063c.113-.05.259-.118.444-.208s.5-.262.932-.515c.432-.253.857-.523 1.26-.807.46-.332.9-.69 1.319-1.073.45-.404.861-.849 1.228-1.33.357-.48.648-1.005.865-1.562a4.79 4.79 0 0 0 .348-1.777v-8A.63.63 0 0 0 13.47.2Zm-1.547 8.54c0 2.9-4.921 5.392-4.921 5.392V1.714h4.92v7.027Z"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
@@ -8,10 +8,10 @@ export function User({ color, disabled, theme }: IconProps) {
|
||||
const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
|
||||
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" fill="none">
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
d="M13.51 12.189a6.616 6.616 0 0 0-4.524-4.915 3.87 3.87 0 0 0 1.968-3.348 3.926 3.926 0 1 0-7.852 0 3.864 3.864 0 0 0 1.95 3.338A6.61 6.61 0 0 0 .49 12.189 1.499 1.499 0 0 0 1.962 14h10.077a1.503 1.503 0 0 0 1.471-1.812ZM4.044 3.926A2.987 2.987 0 0 1 7.592.963a2.985 2.985 0 0 1-.563 5.916 2.973 2.973 0 0 1-2.985-2.953Zm8.427 8.938a.548.548 0 0 1-.436.204H1.962a.548.548 0 0 1-.432-.204.576.576 0 0 1-.119-.486 5.724 5.724 0 0 1 9.175-3.23 5.723 5.723 0 0 1 2.003 3.23.571.571 0 0 1-.118.486Z"
|
||||
d="M9.203 7.339a4 4 0 1 0-4.407 0A7.033 7.033 0 0 0 2.05 8.953a6.655 6.655 0 0 0-1.517 2.162A6.393 6.393 0 0 0 0 13.667C0 14.403.597 15 1.333 15h11.334c.736 0 1.333-.597 1.333-1.333 0-.876-.181-1.743-.533-2.552a6.654 6.654 0 0 0-1.517-2.162 7.032 7.032 0 0 0-2.747-1.614ZM9.5 4a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm2.592 7.714c.247.57.384 1.175.405 1.786H1.503a4.897 4.897 0 0 1 .405-1.786 5.156 5.156 0 0 1 1.177-1.675 5.534 5.534 0 0 1 1.787-1.136A5.805 5.805 0 0 1 7 8.5c.732 0 1.456.137 2.128.403.673.265 1.28.652 1.787 1.136a5.156 5.156 0 0 1 1.177 1.675Z"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
18
apps/browser/src/autofill/content/components/icons/users.ts
Normal file
18
apps/browser/src/autofill/content/components/icons/users.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { css } from "@emotion/css";
|
||||
import { html } from "lit";
|
||||
|
||||
import { IconProps } from "../common-types";
|
||||
import { buildIconColorRule, ruleNames, themes } from "../constants/styles";
|
||||
|
||||
export function Users({ color, disabled, theme }: IconProps) {
|
||||
const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
|
||||
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14" fill="none">
|
||||
<path
|
||||
class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
|
||||
d="M6.5 2.5c0 .375-.082.73-.23 1.049A2.986 2.986 0 0 1 8 3c.644 0 1.241.203 1.73.549a2.5 2.5 0 1 1 3.925.825 4 4 0 0 1 1.173.846c.372.387.667.847.867 1.352.201.506.305 1.047.305 1.595 0 .46-.373.833-.833.833H11a4.987 4.987 0 0 1 1.62 2.087A5 5 0 0 1 13 13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1 5 5 0 0 1 2-4H.833A.833.833 0 0 1 0 8.167c0-.548.103-1.09.304-1.595.202-.505.496-.965.868-1.352.339-.353.736-.64 1.173-.846A2.5 2.5 0 1 1 6.5 2.5ZM4 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1.401 4a2.986 2.986 0 0 1-.389-1.771A2.404 2.404 0 0 0 4 5.5c-.32 0-.638.065-.936.194-.3.13-.575.32-.81.565A2.682 2.682 0 0 0 1.579 7.5h3.822Zm5.198 0h3.822a2.682 2.682 0 0 0-.674-1.24 2.493 2.493 0 0 0-.81-.566 2.362 2.362 0 0 0-1.95.035 2.987 2.987 0 0 1-.39 1.771ZM12 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-4 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm3.464 5a3.5 3.5 0 0 0-6.928 0h6.928Z"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import { html } from "lit";
|
||||
|
||||
// This icon has static multi-colors for each theme
|
||||
export function Warning() {
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 36">
|
||||
<path
|
||||
fill="#FFBF00"
|
||||
d="M15.944 2.483c1.81-3.111 6.303-3.111 8.111 0l15.302 26.319c1.819 3.127-.438 7.049-4.055 7.049H4.698c-3.617 0-5.874-3.922-4.055-7.05L15.944 2.484Z"
|
||||
/>
|
||||
<path
|
||||
fill="#0E3781"
|
||||
fill-rule="evenodd"
|
||||
d="M37.735 29.745 22.433 3.425c-1.085-1.866-3.781-1.866-4.866 0L2.265 29.746c-1.091 1.876.263 4.23 2.433 4.23h30.604c2.17 0 3.524-2.354 2.433-4.23ZM24.055 2.483c-1.808-3.111-6.302-3.111-8.11 0L.643 28.802c-1.819 3.127.438 7.049 4.055 7.049h30.604c3.617 0 5.874-3.922 4.055-7.05L24.055 2.484Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
fill="#0E3781"
|
||||
d="M21.876 28.345a1.876 1.876 0 1 1-3.752 0 1.876 1.876 0 0 1 3.752 0ZM17.24 11.976a.47.47 0 0 1 .467-.519h4.586c.279 0 .496.242.466.52l-1.307 12.196a.47.47 0 0 1-.466.42h-1.972a.47.47 0 0 1-.466-.42L17.24 11.976Z"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
@@ -5,16 +5,10 @@ import { ThemeTypes } from "@bitwarden/common/platform/enums";
|
||||
import { IconProps } from "../common-types";
|
||||
|
||||
// This icon has static multi-colors for each theme
|
||||
export function PartyHorn({ theme }: IconProps) {
|
||||
export function Celebrate({ theme }: IconProps) {
|
||||
if (theme === ThemeTypes.Dark) {
|
||||
return html`
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 50 50"
|
||||
fill="none"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="none">
|
||||
<path
|
||||
d="M32.6273 37.2714L3.88045 49.2492C2.98525 49.6222 1.95344 49.4181 1.26769 48.7323C0.581933 48.0466 0.377816 47.0148 0.750816 46.1196L12.7287 17.3728C13.622 15.2288 15.9911 14.1069 18.2158 14.7743L19.0257 15.0173C26.6887 17.3161 32.6839 23.3113 34.9828 30.9743L35.2257 31.7842C35.8931 34.0089 34.7712 36.3781 32.6273 37.2714Z"
|
||||
fill="#FFBF00"
|
||||
@@ -142,7 +136,7 @@ export function PartyHorn({ theme }: IconProps) {
|
||||
}
|
||||
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="none">
|
||||
<path
|
||||
d="M32.6275 37.2714L3.88069 49.2492C2.98549 49.6222 1.95368 49.4181 1.26793 48.7323C0.582178 48.0466 0.37806 47.0148 0.751061 46.1196L12.7289 17.3728C13.6222 15.2288 15.9914 14.1069 18.216 14.7743L19.026 15.0173C26.6889 17.3161 32.6841 23.3113 34.983 30.9743L35.226 31.7842C35.8934 34.0089 34.7714 36.3781 32.6275 37.2714Z"
|
||||
fill="#FFBF00"
|
||||
@@ -0,0 +1,3 @@
|
||||
export { Celebrate } from "./celebrate";
|
||||
export { Keyhole } from "./keyhole";
|
||||
export { Warning } from "./warning";
|
||||
@@ -0,0 +1,22 @@
|
||||
import { html } from "lit";
|
||||
|
||||
// This icon has static multi-colors for each theme
|
||||
export function Warning() {
|
||||
return html`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 18">
|
||||
<path
|
||||
fill="#FFBF00"
|
||||
d="M11.717.999a1.975 1.975 0 0 0-3.434 0l-8.014 14c-.764 1.333.19 3 1.717 3h16.028c1.527 0 2.48-1.667 1.717-3zm6.713 14.745-8.014-14a.475.475 0 0 0-.832 0l-8.014 14a.5.5 0 0 0 .416.755h16.028a.5.5 0 0 0 .416-.755z"
|
||||
/>
|
||||
<path
|
||||
fill="#0E3781"
|
||||
fill-rule="evenodd"
|
||||
d="M11.717 1a1.975 1.975 0 0 0-3.434 0L.269 15c-.764 1.333.19 3 1.717 3h16.028c1.527 0 2.48-1.667 1.717-3L11.717 1Zm6.713 14.745-8.014-14a.475.475 0 0 0-.832 0l-8.014 14a.5.5 0 0 0 .416.755h16.028a.5.5 0 0 0 .416-.755Z"
|
||||
/>
|
||||
<path
|
||||
fill="#0E3781"
|
||||
d="M11.25 13.587c0 .697-.56 1.261-1.25 1.261s-1.25-.564-1.25-1.26c0-.697.56-1.261 1.25-1.261s1.25.564 1.25 1.26ZM9.003 6.023a.5.5 0 0 0-.496.561l.501 4.043a.5.5 0 0 0 .496.439h.992a.5.5 0 0 0 .496-.439l.5-4.043a.5.5 0 0 0-.495-.561H9.003Z"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import { Meta, Controls } from "@storybook/addon-docs";
|
||||
|
||||
import * as stories from "./icons.lit-stories";
|
||||
|
||||
<Meta title="Components/Icons/Icons" of={stories} />
|
||||
<Meta title="Components/Icons" of={stories} />
|
||||
|
||||
## Icon Stories
|
||||
|
||||
@@ -14,12 +14,12 @@ like size, color, and theme. Each story is an example of how a specific icon can
|
||||
|
||||
| | |
|
||||
| ------------------------- | ------------------ |
|
||||
| `AngleDownIcon` | `FolderIcon` |
|
||||
| `BusinessIcon` | `GlobeIcon` |
|
||||
| `BrandIcon` | `PartyHornIcon` |
|
||||
| `AngleDownIcon` | `AngleUpIcon` |
|
||||
| `BusinessIcon` | `FolderIcon` |
|
||||
| `BrandIcon` | `GlobeIcon` |
|
||||
| `CloseIcon` | `PencilSquareIcon` |
|
||||
| `ExclamationTriangleIcon` | `ShieldIcon` |
|
||||
| `FamilyIcon` | `UserIcon` |
|
||||
| `UsersIcon` | `UserIcon` |
|
||||
|
||||
## Props
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ type Args = {
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/Ciphers/Cipher Indicator Icon",
|
||||
title: "Components/Ciphers/Cipher Indicator Icons",
|
||||
argTypes: {
|
||||
showBusinessIcon: { control: "boolean" },
|
||||
showFamilyIcon: { control: "boolean" },
|
||||
@@ -14,7 +14,7 @@ type Args = {
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/Icons/Icons",
|
||||
title: "Components/Icons",
|
||||
argTypes: {
|
||||
iconLink: { control: "text" },
|
||||
color: { control: "color" },
|
||||
@@ -53,16 +53,16 @@ const createIconStory = (iconName: keyof typeof Icons): StoryObj<Args> => {
|
||||
};
|
||||
|
||||
export const AngleDownIcon = createIconStory("AngleDown");
|
||||
export const BusinessIcon = createIconStory("Business");
|
||||
export const AngleUpIcon = createIconStory("AngleUp");
|
||||
export const BrandIcon = createIconStory("BrandIconContainer");
|
||||
export const BusinessIcon = createIconStory("Business");
|
||||
export const CloseIcon = createIconStory("Close");
|
||||
export const CollectionIcon = createIconStory("Collection");
|
||||
export const ExclamationTriangleIcon = createIconStory("ExclamationTriangle");
|
||||
export const ExternalLinkIcon = createIconStory("ExternalLink");
|
||||
export const FamilyIcon = createIconStory("Family");
|
||||
export const FolderIcon = createIconStory("Folder");
|
||||
export const GlobeIcon = createIconStory("Globe");
|
||||
export const KeyholeIcon = createIconStory("Keyhole");
|
||||
export const PartyHornIcon = createIconStory("PartyHorn");
|
||||
export const PencilSquareIcon = createIconStory("PencilSquare");
|
||||
export const ShieldIcon = createIconStory("Shield");
|
||||
export const UserIcon = createIconStory("User");
|
||||
export const UsersIcon = createIconStory("Users");
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Meta, StoryObj } from "@storybook/web-components";
|
||||
import { html } from "lit";
|
||||
|
||||
import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
|
||||
|
||||
import * as Illustrations from "../../illustrations";
|
||||
|
||||
type Args = {
|
||||
theme: Theme;
|
||||
size: number;
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/Illustrations",
|
||||
argTypes: {
|
||||
theme: { control: "select", options: [...Object.values(ThemeTypes)] },
|
||||
size: { control: "number", min: 10, max: 100, step: 1 },
|
||||
},
|
||||
args: {
|
||||
theme: ThemeTypes.Light,
|
||||
size: 50,
|
||||
},
|
||||
} as Meta<Args>;
|
||||
|
||||
const Template = (
|
||||
args: Args,
|
||||
IllustrationComponent: (props: Args) => ReturnType<typeof html>,
|
||||
) => html`
|
||||
<div
|
||||
style="width: ${args.size}px; height: ${args.size}px; display: flex; align-items: center; justify-content: center;"
|
||||
>
|
||||
${IllustrationComponent({ ...args })}
|
||||
</div>
|
||||
`;
|
||||
|
||||
const createIllustrationStory = (illustrationName: keyof typeof Illustrations): StoryObj<Args> => {
|
||||
return {
|
||||
render: (args) => Template(args, Illustrations[illustrationName]),
|
||||
} as StoryObj<Args>;
|
||||
};
|
||||
|
||||
export const KeyholeIllustration = createIllustrationStory("Keyhole");
|
||||
export const CelebrateIllustration = createIllustrationStory("Celebrate");
|
||||
export const WarningIllustration = createIllustrationStory("Warning");
|
||||
@@ -4,14 +4,14 @@ import { ProductTierType } from "@bitwarden/common/billing/enums";
|
||||
import { Theme } from "@bitwarden/common/platform/enums";
|
||||
|
||||
import { Option, OrgView, FolderView } from "../common-types";
|
||||
import { Business, Family, Folder, User } from "../icons";
|
||||
import { Business, Users, Folder, User } from "../icons";
|
||||
import { ButtonRow } from "../rows/button-row";
|
||||
|
||||
function getVaultIconByProductTier(productTierType?: ProductTierType): Option["icon"] {
|
||||
switch (productTierType) {
|
||||
case ProductTierType.Free:
|
||||
case ProductTierType.Families:
|
||||
return Family;
|
||||
return Users;
|
||||
case ProductTierType.Teams:
|
||||
case ProductTierType.Enterprise:
|
||||
case ProductTierType.TeamsStarter:
|
||||
|
||||
@@ -4,7 +4,7 @@ import { html, nothing } from "lit";
|
||||
import { Theme } from "@bitwarden/common/platform/enums";
|
||||
|
||||
import { themes } from "../../constants/styles";
|
||||
import { PartyHorn, Keyhole, Warning } from "../../icons";
|
||||
import { Celebrate, Keyhole, Warning } from "../../illustrations";
|
||||
|
||||
import { NotificationConfirmationMessage } from "./message";
|
||||
|
||||
@@ -33,7 +33,7 @@ export function NotificationConfirmationBody({
|
||||
theme,
|
||||
handleOpenVault,
|
||||
}: NotificationConfirmationBodyProps) {
|
||||
const IconComponent = tasksAreComplete ? Keyhole : !error ? PartyHorn : Warning;
|
||||
const IconComponent = tasksAreComplete ? Keyhole : !error ? Celebrate : Warning;
|
||||
|
||||
const showConfirmationMessage = confirmationMessage || buttonText || messageDetails;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user