@atlaskit/logo 13.7.0 → 13.8.1

package/dist/types/jira-service-management-logo/logo.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const JiraServiceManagementLogo: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Jira Service Management logo__
+ *
+ * The Jira Service Management logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const JiraServiceManagementLogo: ({ appearance, label, size, testId, iconColor, iconGradientStart, iconGradientStop, textColor, }: LogoProps) => JSX.Element;

package/dist/types/jira-service-management-logo/wordmark.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const JiraServiceManagementWordmark: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Jira Service Management wordmark__
+ *
+ * The Jira Service Management brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const JiraServiceManagementWordmark: ({ appearance, label, size, testId, textColor, }: LogoProps) => JSX.Element;

package/dist/types/jira-software-logo/icon.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const JiraSoftwareIcon: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Jira software icon__
+ *
+ * The Jira Software icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const JiraSoftwareIcon: ({ appearance, label, size, testId, iconColor, iconGradientStart, iconGradientStop, textColor, }: LogoProps) => JSX.Element;

package/dist/types/jira-software-logo/logo.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const JiraSoftwareLogo: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Jira Software logo__
+ *
+ * The Jira Software logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const JiraSoftwareLogo: ({ appearance, label, size, testId, iconColor, iconGradientStart, iconGradientStop, textColor, }: LogoProps) => JSX.Element;

package/dist/types/jira-software-logo/wordmark.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const JiraSoftwareWordmark: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Jira Software wordmark__
+ *
+ * The Jira Software brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const JiraSoftwareWordmark: ({ appearance, label, size, testId, textColor, iconColor, iconGradientStart, iconGradientStop, }: LogoProps) => JSX.Element;

package/dist/types/jira-work-management-logo/icon.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const JiraWorkManagementIcon: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Jira Work Management icon__
+ *
+ * The Jira Work Management icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const JiraWorkManagementIcon: ({ appearance, label, size, testId, iconColor, iconGradientStart, iconGradientStop, textColor, }: LogoProps) => JSX.Element;

package/dist/types/jira-work-management-logo/logo.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const JiraWorkManagementLogo: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Jira Work Management logo__
+ *
+ * The Jira Work Management logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const JiraWorkManagementLogo: ({ appearance, label, size, testId, iconColor, iconGradientStart, iconGradientStop, textColor, }: LogoProps) => JSX.Element;

package/dist/types/jira-work-management-logo/wordmark.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const JiraWorkManagementWordmark: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Jira Work Management wordmark__
+ *
+ * The Jira Work Management brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const JiraWorkManagementWordmark: ({ appearance, label, size, testId, iconColor, iconGradientStart, iconGradientStop, textColor, }: LogoProps) => JSX.Element;

package/dist/types/opsgenie-logo/new-icon.d.ts

@@ -1,6 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
 /**
- * This is the correct seplling of Opsgenie and the icon we are moving towards after OpsGenie is deprecated correctly.
+ * __Opsgenie icon__
+ *
+ * The Opsgenie icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
  */
-export declare const OpsgenieIcon: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+export declare const OpsgenieIcon: ({ appearance, label, size, testId, textColor, iconColor, iconGradientStart, iconGradientStop, }: LogoProps) => JSX.Element;

package/dist/types/opsgenie-logo/new-logo.d.ts

@@ -1,6 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
 /**
- * This is the correct logo as it has the correct casing. Please do not use old-logo.tsx.
+ * __Opsgenie logo__
+ *
+ * The Opsgenie logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
  */
-export declare const OpsgenieLogo: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+export declare const OpsgenieLogo: ({ appearance, label, size, testId, textColor, iconColor, iconGradientStart, iconGradientStop, }: LogoProps) => JSX.Element;

package/dist/types/opsgenie-logo/new-wordmark.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const OpsgenieWordmark: ({ iconColor, iconGradientStart, iconGradientStop, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Opsgenie wordmark__
+ *
+ * The Opsgenie brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const OpsgenieWordmark: ({ appearance, size, testId, textColor, iconColor, iconGradientStart, iconGradientStop, }: LogoProps) => JSX.Element;

package/dist/types/statuspage-logo/icon.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const StatuspageIcon: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Statuspage icon__
+ *
+ * The Statuspage icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const StatuspageIcon: ({ appearance, label, size, testId, iconColor, iconGradientStart, iconGradientStop, textColor, }: LogoProps) => JSX.Element;

package/dist/types/statuspage-logo/logo.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const StatuspageLogo: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Statuspage logo__
+ *
+ * The Statuspage logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const StatuspageLogo: ({ appearance, label, size, testId, iconColor, iconGradientStart, iconGradientStop, textColor, }: LogoProps) => JSX.Element;

package/dist/types/statuspage-logo/wordmark.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const StatuspageWordmark: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Statuspage wordmark__
+ *
+ * The Statuspage brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const StatuspageWordmark: ({ appearance, label, size, testId, iconColor, iconGradientStart, iconGradientStop, textColor, }: LogoProps) => JSX.Element;

package/dist/types/trello-logo/icon.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const TrelloIcon: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Trello logo__
+ *
+ * The Trello icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const TrelloIcon: ({ appearance, label, size, testId, iconColor, iconGradientStart, iconGradientStop, textColor, }: LogoProps) => JSX.Element;

package/dist/types/trello-logo/logo.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const TrelloLogo: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Trello logo__
+ *
+ * The Trello logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const TrelloLogo: ({ appearance, label, size, testId, iconColor, iconGradientStart, iconGradientStop, textColor, }: LogoProps) => JSX.Element;

package/dist/types/trello-logo/wordmark.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { LogoProps } from '../types';
-export declare const TrelloWordmark: ({ iconColor, iconGradientStart, iconGradientStop, label, size, testId, textColor, }: LogoProps) => JSX.Element;
+/**
+ * __Trello wordmark__
+ *
+ * The Trello brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const TrelloWordmark: ({ appearance, label, size, testId, iconColor, iconGradientStart, iconGradientStop, textColor, }: LogoProps) => JSX.Element;

package/dist/types/types.d.ts

@@ -1,27 +1,33 @@
+export declare type Appearance = 'brand' | 'neutral' | 'inverse';
+export declare type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 export declare type LogoProps = {
     /**
      * The size of the icon, uses the same sizing scheme as in `@atlaskit/icon`.
      */
-    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    size?: Size;
     /**
-     * CSS color to be applied to the wordmark portion of the logo SVG.
+     * Choice of logo appearance between 3 brand-approved color combinations that will be hooked up to design tokens and theming.
+     */
+    appearance?: Appearance;
+    /**
+     * @deprecated CSS color to be applied to the wordmark portion of the logo SVG. The use of this prop is not recommended as it is not compatible with design tokens; use the `appearance` prop instead.
      */
     textColor?: string;
     /**
-     * CSS color to be applied to the non-gradient icon portion of the logo SVG.
+     * @deprecated CSS color to be applied to the non-gradient icon portion of the logo SVG. The use of this prop is not recommended as it is not compatible with design tokens; use the `appearance` prop instead.
      */
     iconColor?: string;
     /**
-     * CSS color to start the gradient/shadow on the icon.
+     * @deprecated CSS color to start the gradient/shadow on the icon. The use of this prop is not recommended as it is not compatible with design tokens; use the `appearance` prop instead.
      */
     iconGradientStart?: string;
     /**
-     * CSS color to end the gradient/shadow on the icon. Should usually match iconColor to avoid
-     * rendering issues in some browsers such as Safari.
+     * @deprecated CSS color to end the gradient/shadow on the icon. Should usually match iconColor to avoid
+     * rendering issues in some browsers such as Safari. The use of this prop is not recommended as it is not compatible with design tokens; use the `appearance` prop instead.
      */
     iconGradientStop?: string;
     /**
-     * Accessible text to be used for screen readers (it's optional since defaultProps contains empty string for it).
+     * Accessible text to be used for screen readers (it's optional since the default props provide a label that matches the logo).
      */
     label?: string;
     /**

package/dist/types/utils.d.ts

@@ -0,0 +1,7 @@
+export declare const getColorsFromAppearance: (appearance?: string | undefined) => {
+    iconGradientStart: string | undefined;
+    iconGradientStop: string | undefined;
+    iconColor: string | undefined;
+    textColor: string | undefined;
+    atlassianLogoTextColor: string | undefined;
+};

package/dist/types/wrapper.d.ts

@@ -6,5 +6,5 @@ import { WrapperProps } from './constants';
  *
  * An internal component used by `@atlaskit/logo` to render logo SVGs with correct styles.
  */
-declare const Wrapper: ({ label, svg, iconGradientStart, iconGradientStop, size, iconColor, testId: userDefinedTestId, textColor, ...rest }: WrapperProps) => JSX.Element;
+declare const Wrapper: ({ label, svg, size, appearance, iconGradientStart, iconGradientStop, iconColor, textColor, testId: userDefinedTestId, ...rest }: WrapperProps) => JSX.Element;
 export default Wrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/logo",
-  "version": "13.7.0",
+  "version": "13.8.1",
   "description": "A logo is a visual representation of a brand or product. It can be a word or an image, or a combination of both.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -18,7 +18,8 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Logo"
+      "name": "Logo",
+      "category": "Components"
     }
   },
   "af:exports": {
@@ -41,7 +42,9 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^1.4.0",
+    "@atlaskit/ds-lib": "^2.1.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "react-uid": "^2.2.0"
@@ -50,14 +53,14 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
+    "@atlaskit/atlassian-navigation": "^2.2.2",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/code": "^14.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/radio": "^5.3.2",
     "@atlaskit/section-message": "^6.1.0",
-    "@atlaskit/select": "^15.3.0",
+    "@atlaskit/select": "^15.5.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/theme": "^12.1.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^8.0.1",
@@ -70,6 +73,8 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "design-system": "v1",
+      "dom-events": "use-bind-event-listener",
       "analytics": "analytics-next",
       "theming": "react-context",
       "styling": [