Merge branch 'main' into uif/cl-619/hide-icons-by-default

Author: BryanCunningham

apps/browser/src/autofill/content/components/cipher/cipher-indicator-icons.ts

@@ -4,7 +4,7 @@ import { html, TemplateResult } from "lit";
 import { Theme } from "@bitwarden/common/platform/enums";
 
 import { themes } from "../../../content/components/constants/styles";
-import { Business, Users } from "../../../content/components/icons";
+import { Business, Family } from "../../../content/components/icons";
 
 import { OrganizationCategories, OrganizationCategory } from "./types";
 
@@ -13,7 +13,7 @@ const cipherIndicatorIconsMap: Record<
   (args: { color: string; theme: Theme }) => TemplateResult
 > = {
   [OrganizationCategories.business]: Business,
-  [OrganizationCategories.family]: Users,
+  [OrganizationCategories.family]: Family,
 };
 
 export function CipherInfoIndicatorIcons({

apps/browser/src/autofill/content/components/icons/collection.ts renamed to apps/browser/src/autofill/content/components/icons/collection-shared.ts

@@ -4,14 +4,14 @@ import { html } from "lit";
 import { IconProps } from "../common-types";
 import { buildIconColorRule, ruleNames, themes } from "../constants/styles";
 
-export function Collection({ color, disabled, theme }: IconProps) {
+export function CollectionShared({ 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"
+        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.5ZM6 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM10 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM7 11.46a1.928 1.928 0 0 0-.586-1.386 2.035 2.035 0 0 0-2.828 0A1.928 1.928 0 0 0 3 11.461c0 .298.241.539.54.539h2.92a.54.54 0 0 0 .54-.54ZM8 11.46a2.928 2.928 0 0 0-.371-1.426A2.005 2.005 0 0 1 9 9.5a2.035 2.035 0 0 1 1.414.574A1.928 1.928 0 0 1 11 11.461a.54.54 0 0 1-.54.539H7.904c.063-.168.097-.35.097-.54Z"
       />
       <path
         class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}

apps/browser/src/autofill/content/components/icons/family.ts

@@ -0,0 +1,19 @@
+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 16 16" fill="none">
+      <path
+        class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
+        fill-rule="evenodd"
+        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.47 6.47 0 0 1-.932 3.356 3.732 3.732 0 0 0-1.106-.784 3.547 3.547 0 0 0-.516-.19 2 2 0 1 0-3.444-1.297c-.323-.216-.681-.4-1.069-.536a2.5 2.5 0 1 0-3.065-.155 5.405 5.405 0 0 0-1.59.674 3.912 3.912 0 0 0-.977.893A6.5 6.5 0 1 1 14.5 8ZM2.531 11.514a.75.75 0 0 0 .103-.13c.276-.436.552-.801.942-1.047a3.837 3.837 0 0 1 1.177-.492 5.243 5.243 0 0 1 .845-.095h.007l.022.001h.023c.436 0 .865.07 1.262.205.381.13.733.335 1.037.584.175.143.324.3.448.465l.164.226a4.13 4.13 0 0 0-1.035 1.565 4.407 4.407 0 0 0-.276 1.537c0 .043.004.085.01.125a6.5 6.5 0 0 1-4.729-2.944Zm10.033.964.07.08a6.481 6.481 0 0 1-3.894 1.9.757.757 0 0 0 .01-.125c0-.35.062-.694.181-1.013a2.63 2.63 0 0 1 .505-.842c.213-.237.462-.42.73-.543.267-.123.55-.185.834-.185.284 0 .567.062.835.185.267.123.516.306.729.543ZM7 6.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM11 9a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z"
+      />
+    </svg>
+  `;
+}

apps/browser/src/autofill/content/components/icons/index.ts

@@ -3,12 +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 { CollectionShared } from "./collection-shared";
 export { ExclamationTriangle } from "./exclamation-triangle";
 export { ExternalLink } from "./external-link";
+export { Family } from "./family";
 export { Folder } from "./folder";
 export { Globe } from "./globe";
 export { PencilSquare } from "./pencil-square";
 export { Shield } from "./shield";
 export { User } from "./user";
-export { Users } from "./users";

apps/browser/src/autofill/content/components/icons/users.ts

@@ -43,26 +43,23 @@ const createIconStory = (iconName: keyof typeof Icons): StoryObj<Args> => {
     render: (args) => Template(args, Icons[iconName]),
   } as StoryObj<Args>;
 
-  if (iconName !== "BrandIconContainer") {
-    story.argTypes = {
-      iconLink: { table: { disable: true } },
-    };
-  }
+  story.argTypes = {
+    iconLink: { table: { disable: true } },
+  };
 
   return story;
 };
 
 export const AngleDownIcon = createIconStory("AngleDown");
 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 CollectionSharedIcon = createIconStory("CollectionShared");
 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 PencilSquareIcon = createIconStory("PencilSquare");
 export const ShieldIcon = createIconStory("Shield");
 export const UserIcon = createIconStory("User");
-export const UsersIcon = createIconStory("Users");

apps/browser/src/autofill/content/components/lit-stories/icons/icons.lit-stories.ts

@@ -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, Users, Folder, User } from "../icons";
+import { Business, Family, 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 Users;
+      return Family;
     case ProductTierType.Teams:
     case ProductTierType.Enterprise:
     case ProductTierType.TeamsStarter: