@appquality/unguess-design-system 2.0.0 → 2.3.0

package/.github/workflows/storybook.yml

@@ -0,0 +1,37 @@
+# This is a basic workflow to help you get started with Actions
+
+name: Publish storybook
+
+# The event that will trigger the action
+on:
+  # push:
+  #  branches: [master]
+  # pull_request:
+  #  branches: [master]
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+          
+      - name: Publish storybook
+        id: storybook
+        run: |
+          yarn --frozen-lockfile
+          yarn run build
+          npx chromatic --project-token  ${{ secrets.CHROMATIC_TOKEN }} --exit-zero-on-changes --ci

package/CHANGELOG.md

@@ -1,3 +1,125 @@
+# v2.2.0 (Tue Mar 15 2022)
+
+#### 🚀 Enhancement
+
+- feat(tiles): add tiles component [#12](https://github.com/AppQuality/unguess-design-system/pull/12) ([@antoninojob](https://github.com/antoninojob))
+- Login form [#15](https://github.com/AppQuality/unguess-design-system/pull/15) ([@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks))
+- Feat/improve storybook experience [#14](https://github.com/AppQuality/unguess-design-system/pull/14) ([@cannarocks](https://github.com/cannarocks))
+
+#### 🐛 Bug Fix
+
+- fix(table): changed types definition for extras elements [#13](https://github.com/AppQuality/unguess-design-system/pull/13) ([@antoninojob](https://github.com/antoninojob))
+- Cup 438 table [#10](https://github.com/AppQuality/unguess-design-system/pull/10) ([@antoninojob](https://github.com/antoninojob))
+- feat(tag): add tag component [#11](https://github.com/AppQuality/unguess-design-system/pull/11) ([@antoninojob](https://github.com/antoninojob))
+
+#### ⚠️ Pushed to `master`
+
+- fix(export): prevent naming conflicts ([@cannarocks](https://github.com/cannarocks))
+- feat(loginform): add basic Login Form ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 3
+
+- Antonino ([@antoninojob](https://github.com/antoninojob))
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v2.2.0 (Tue Mar 15 2022)
+
+#### 🚀 Enhancement
+
+- feat(tiles): add tiles component [#12](https://github.com/AppQuality/unguess-design-system/pull/12) ([@antoninojob](https://github.com/antoninojob))
+- Login form [#15](https://github.com/AppQuality/unguess-design-system/pull/15) ([@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks))
+- Feat/improve storybook experience [#14](https://github.com/AppQuality/unguess-design-system/pull/14) ([@cannarocks](https://github.com/cannarocks))
+
+#### 🐛 Bug Fix
+
+- fix(table): changed types definition for extras elements [#13](https://github.com/AppQuality/unguess-design-system/pull/13) ([@antoninojob](https://github.com/antoninojob))
+- Cup 438 table [#10](https://github.com/AppQuality/unguess-design-system/pull/10) ([@antoninojob](https://github.com/antoninojob))
+- feat(tag): add tag component [#11](https://github.com/AppQuality/unguess-design-system/pull/11) ([@antoninojob](https://github.com/antoninojob))
+
+#### ⚠️ Pushed to `master`
+
+- fix(export): prevent naming conflicts ([@cannarocks](https://github.com/cannarocks))
+- feat(loginform): add basic Login Form ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 3
+
+- [@marcbon](https://github.com/marcbon)
+- Antonino ([@antoninojob](https://github.com/antoninojob))
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.1.0 (Fri Mar 11 2022)
+
+#### 🚀 Enhancement
+
+- Cup 431 form [#8](https://github.com/AppQuality/unguess-design-system/pull/8) ([@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks))
+- feat(multiselect): add multiselect and palette story [#9](https://github.com/AppQuality/unguess-design-system/pull/9) ([@cannarocks](https://github.com/cannarocks))
+- Cup 433 loaders [#7](https://github.com/AppQuality/unguess-design-system/pull/7) ([@marcbon](https://github.com/marcbon))
+- Cup 446 wells [#6](https://github.com/AppQuality/unguess-design-system/pull/6) ([@cannarocks](https://github.com/cannarocks))
+- add avatar component [#5](https://github.com/AppQuality/unguess-design-system/pull/5) ([@marcbon](https://github.com/marcbon))
+- Cup 424 accordion [#4](https://github.com/AppQuality/unguess-design-system/pull/4) ([@cannarocks](https://github.com/cannarocks))
+- Typography components [#3](https://github.com/AppQuality/unguess-design-system/pull/3) ([@cannarocks](https://github.com/cannarocks))
+
+#### ⚠️ Pushed to `master`
+
+- feat(storybook): add Unguess theme ([@cannarocks](https://github.com/cannarocks))
+- feat(intro): add intro page story ([@cannarocks](https://github.com/cannarocks))
+- fix(field): fix wrong import for form field component ([@cannarocks](https://github.com/cannarocks))
+- fix(field): restore form field component ([@cannarocks](https://github.com/cannarocks))
+- build(storybook): update Github action used to publish component build ([@cannarocks](https://github.com/cannarocks))
+- refactor(stories): move molecules under right group ([@cannarocks](https://github.com/cannarocks))
+- Merge branch 'CUP-430-dropdowns' ([@cannarocks](https://github.com/cannarocks))
+- fix(palette): remove useless import ([@cannarocks](https://github.com/cannarocks))
+- Create storybook.yml ([@cannarocks](https://github.com/cannarocks))
+- refactor(notifications): remove unused imports ([@cannarocks](https://github.com/cannarocks))
+- feat(notifications): add notification component ([@cannarocks](https://github.com/cannarocks))
+- fix avatars description ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 2
+
+- [@marcbon](https://github.com/marcbon)
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.1.0 (Fri Mar 11 2022)
+
+#### 🚀 Enhancement
+
+- Cup 431 form [#8](https://github.com/AppQuality/unguess-design-system/pull/8) ([@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks))
+- feat(multiselect): add multiselect and palette story [#9](https://github.com/AppQuality/unguess-design-system/pull/9) ([@cannarocks](https://github.com/cannarocks))
+- Cup 433 loaders [#7](https://github.com/AppQuality/unguess-design-system/pull/7) ([@marcbon](https://github.com/marcbon))
+- Cup 446 wells [#6](https://github.com/AppQuality/unguess-design-system/pull/6) ([@cannarocks](https://github.com/cannarocks))
+- add avatar component [#5](https://github.com/AppQuality/unguess-design-system/pull/5) ([@marcbon](https://github.com/marcbon))
+- Cup 424 accordion [#4](https://github.com/AppQuality/unguess-design-system/pull/4) ([@cannarocks](https://github.com/cannarocks))
+- Typography components [#3](https://github.com/AppQuality/unguess-design-system/pull/3) ([@cannarocks](https://github.com/cannarocks))
+
+#### ⚠️ Pushed to `master`
+
+- feat(storybook): add Unguess theme ([@cannarocks](https://github.com/cannarocks))
+- feat(intro): add intro page story ([@cannarocks](https://github.com/cannarocks))
+- fix(field): fix wrong import for form field component ([@cannarocks](https://github.com/cannarocks))
+- fix(field): restore form field component ([@cannarocks](https://github.com/cannarocks))
+- build(storybook): update Github action used to publish component build ([@cannarocks](https://github.com/cannarocks))
+- refactor(stories): move molecules under right group ([@cannarocks](https://github.com/cannarocks))
+- Merge branch 'CUP-430-dropdowns' ([@cannarocks](https://github.com/cannarocks))
+- fix(palette): remove useless import ([@cannarocks](https://github.com/cannarocks))
+- Create storybook.yml ([@cannarocks](https://github.com/cannarocks))
+- refactor(notifications): remove unused imports ([@cannarocks](https://github.com/cannarocks))
+- feat(notifications): add notification component ([@cannarocks](https://github.com/cannarocks))
+- fix avatars description ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 2
+
+- [@marcbon](https://github.com/marcbon)
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v1.0.0 (Fri Mar 04 2022)
 
 #### 💥 Breaking Change

package/README.md

@@ -1,46 +1,73 @@
-# Getting Started with Create React App
+# UNGUESS Design System
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
-## Available Scripts
+## Used by
 
-In the project directory, you can run:
+- [Unguess platform](https://app.unguess.io/)
 
-### `npm start`
+## Tech stack
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Building components
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+- 🪴 [Zendesk Garden](https://garden.zendesk.com/) as base design system
+- ⚛️ [React](https://reactjs.org/) declarative component-centric UI
+- 📚 [Storybook](https://storybook.js.org) for UI component development and [auto-generated docs](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
+- 👩‍🎤 [Styled Components](https://styled-components.com/) for component-scoped styling
 
-### `npm test`
+Maintaining the system
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+- 📦 [Yarn](https://yarnpkg.com/) for package management
+- 📦 [NPM](https://www.npmjs.com/) for distribution
+- ✅ [Chromatic](https://www.chromatic.com/) to prevent UI bugs in components (by Storybook maintainers)
 
-### `npm run build`
+## Why
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+The Unguess design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with Storybook's design patterns.
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+## Install
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+```bash
+yarn
+```
 
-### `npm run eject`
+## Global Styles
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+Components within the design system assume that a set of global styles have been configured. Depending upon the needs of the application, this can be done several ways:
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+#### Option 1: Render the `GlobalStyle` component
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+Useful when you don't need any custom `body` styling in the application, typically this would be placed in a layout component that wraps all pages, or a top-level `App` component.
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+```javascript
+import { global } from '@storybook/design-system';
+const { GlobalStyle } = global;
+```
 
-## Learn More
+```javascript
+/* Render the global styles once per page */
+<GlobalStyle />
+```
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+#### Option 2: Use the `bodyStyles` to apply styling
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+Useful when you want build upon the shared global styling.
+
+```javascript
+import { Global, css } from '@storybook/theming';
+import { global } from '@storybook/design-system';
+const { bodyStyles } = global;
+
+const customGlobalStyle = css`
+  body {
+    ${bodyStyles}// Custom body styling for the app
+  }
+`;
+
+const CustomGlobalStyle = () => <Global styles={customGlobalStyle} />;
+```
+
+```javascript
+/* Render the global styles once per page */
+<CustomGlobalStyle />
+```

package/build/index.d.ts

@@ -1,5 +1,11 @@
 import { GlobalStyle } from './stories/shared/globalStyle';
+export * from './stories/avatar';
+export * from './stories/breadcrumbs';
 export * from './stories/buttons/button';
 export * from './stories/buttons/anchor';
+export * from './stories/buttons/button-group';
+export * from './stories/buttons/icon-button';
+export * from './stories/buttons/split-button';
+export * from './stories/loaders/spinner';
 export * from './stories/theme';
 export { GlobalStyle };

package/build/index.js

@@ -5,7 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var jsxRuntime = require('react/jsx-runtime');
+var reactAvatars = require('@zendeskgarden/react-avatars');
+var reactBreadcrumbs = require('@zendeskgarden/react-breadcrumbs');
 var reactButtons = require('@zendeskgarden/react-buttons');
+var reactLoaders = require('@zendeskgarden/react-loaders');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -44,22 +47,99 @@ function __makeTemplateObject(cooked, raw) {
 
 var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: "#003A57" }), fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }) });
 
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\nbody {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }"], ["\nbody {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }"])), theme.fonts.system);
-var templateObject_1$1;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "], ["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "])), theme.fonts.system);
+var templateObject_1$3;
+
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject([""], [""])));
+/**
+ * An Avatar is a visual way to represent a person or brand in the product. They can display text, icons, or images.
+ * <hr>
+ * Used for this:
+    - To visually represent a person, brand, or product
+ */
+var Avatar = function (props) { return jsxRuntime.jsx(UgAvatar, __assign({}, props)); };
+Avatar.Text = UgAvatar.Text;
+var templateObject_1$2;
 
-var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 /**
- *
- * Buttons let users take action quickly. Use a Button to enable actions or decisions that are important to a user’s workflow.
+ * Breadcrumbs mark and communicate a user’s location in the product.
+ * <hr>
+ * Used for this:
+    - To show the user where they are in a nested navigation
+    - To provide a quick way to navigate to ancestor pages
+ */
+var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Breadcrumb, __assign({}, props)); };
+
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject([""], [""])));
+/**
+ * Buttons let users take action quickly.
+ * Use a Button to enable actions or decisions that are important to a user’s workflow.
+ * <hr>
+ * Used for this:
+   - To enable user action
+   - To draw attention to relevant actions in a user's workflow
  */
 var Button = function (props) { return jsxRuntime.jsx(UgButton, __assign({}, props)); };
 Button.StartIcon = UgButton.StartIcon;
 Button.EndIcon = UgButton.EndIcon;
-var templateObject_1;
+var templateObject_1$1;
 
+/**
+ * The Anchor is a link that helps users navigate from one location to another.
+ * <hr>
+ * Used for this:
+    - To navigate from one page to another
+    - To navigate within a page
+    - To display links alongside text
+ */
 var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
 
+/**
+A Button group lets users make a selection from a set of options.
+
+This is a legacy component and may be deprecated in the future. UNGUESS does not presently recommend the use of Button groups.
+**/
+var ButtonGroup = function (props) { return (jsxRuntime.jsx(reactButtons.ButtonGroup, __assign({}, props))); };
+
+/**
+Icon buttons (like Buttons) let users take action.
+They are used for repeated or persistent actions on a page and lack visible labels to simplify the UI.
+<br>
+Do this: <b>Include a Tooltip to help any users who may be unfamiliar with the icon.</b>
+<hr>
+Used for this
+ - To simplify the appearance of repeated or persistent actions on a page
+ - To enable action in a toolbar
+**/
+var IconButton = function (props) { return (jsxRuntime.jsx(reactButtons.IconButton, __assign({}, props))); };
+
+/**
+A Split button is a hybrid between a Dropdown Menu and a Button. It lets users choose from parallel actions and take action on their choice.
+<hr>
+Used for this:
+- To let users select from multiple parallel actions. Actions are parallel when each represents a path forward for the user and none cancel the action.
+- To reduce visual complexity when there are multiple actions a user can take
+**/
+var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
+
+var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+/**
+ * Breadcrumbs mark and communicate a user’s location in the product.
+ * <hr>
+ * Used for this:
+    - To show the user where they are in a nested navigation
+    - To provide a quick way to navigate to ancestor pages
+ */
+var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
+var templateObject_1;
+
 exports.Anchor = Anchor;
+exports.Avatar = Avatar;
+exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
 exports.GlobalStyle = GlobalStyle;
+exports.IconButton = IconButton;
+exports.Spinner = Spinner;
+exports.SplitButton = SplitButton;
 exports.theme = theme;

package/build/stories/accordions/_types.d.ts

@@ -0,0 +1,25 @@
+import { IAccordionProps } from "@zendeskgarden/react-accordions";
+export interface AccordionArgs extends IAccordionProps {
+    /** Sets `aria-level` heading rank in the document structure */
+    level: number;
+    /** Sets the expanded sections in a controlled accordion */
+    expandedSections?: number[];
+    /** Sets the default expanded sections in an uncontrolled accordion */
+    defaultExpandedSections?: number[];
+    /** Hides section borders */
+    isBare?: boolean;
+    /** Allows uncontrolled accordion sections to collapse */
+    isCollapsible?: boolean;
+    /** Applies compact styling */
+    isCompact?: boolean;
+    /** Animates section expansion and collapse */
+    isAnimated?: boolean;
+    /** Enables simultaneous expansion of uncontrolled accordion sections */
+    isExpandable?: boolean;
+    /**
+     * Handles accordion expansion changes
+     *
+     * @param {number} index A section index
+     */
+    onChange?: (index: number) => void;
+}

package/build/stories/accordions/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { AccordionArgs } from './_types';
+/**
+ * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
+ * <hr>
+ * Used for this:
+    - To organize related information into sections
+    - To surface information through progressive disclosure
+ */
+declare const Accordion: {
+    (props: AccordionArgs): JSX.Element;
+    Section: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+    Panel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+};
+export { Accordion };

package/build/stories/accordions/index.stories.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { AccordionArgs } from "./_types";
+interface AccordionStoryArg extends AccordionArgs {
+    items: Array<{
+        headerTitle: string;
+        content: string;
+    }>;
+}
+export declare const Default: Story<AccordionStoryArg>;
+export declare const Bare: Story<AccordionStoryArg>;
+export declare const Expandable: Story<AccordionStoryArg>;
+declare const _default: ComponentMeta<{
+    (props: AccordionArgs): JSX.Element;
+    Section: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+    Panel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+}>;
+export default _default;

package/build/stories/avatar/_types.d.ts

@@ -0,0 +1,17 @@
+import { IAvatarProps } from '@zendeskgarden/react-avatars';
+export interface AvatarArgs extends IAvatarProps {
+    /** Sets the avatar background color */
+    backgroundColor?: string;
+    /** Sets the color for child SVG or `Avatar.Text` components */
+    foregroundColor?: string;
+    /** Provides surface color for an avatar placed on a non-white background */
+    surfaceColor?: string;
+    /** Applies system styling for representing objects, brands, or products */
+    isSystem?: boolean;
+    /** Specifies the avatar size */
+    size?: 'extraextrasmall' | 'extrasmall' | 'small' | 'medium' | 'large';
+    /** Applies status styling */
+    status?: 'available' | 'away';
+    /** Sets the badge text and applies active styling */
+    badge?: string | number;
+}

package/build/stories/avatar/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { AvatarArgs } from './_types';
+/**
+ * An Avatar is a visual way to represent a person or brand in the product. They can display text, icons, or images.
+ * <hr>
+ * Used for this:
+    - To visually represent a person, brand, or product
+ */
+declare const Avatar: {
+    (props: AvatarArgs): JSX.Element;
+    Text: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export { Avatar };

package/build/stories/avatar/index.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { AvatarArgs } from "./_types";
+interface AvatarProps extends AvatarArgs {
+    type: 'icon' | 'image' | 'text';
+}
+export declare const Default: Story<AvatarProps>;
+export declare const Square: Story<AvatarProps>;
+declare const _default: ComponentMeta<{
+    (props: AvatarArgs): JSX.Element;
+    Text: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+}>;
+export default _default;

package/build/stories/breadcrumbs/_types.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface BreadcrumbArgs extends React.HTMLAttributes<HTMLDivElement> {
+    /** The breadcrumb items */
+    children: any[];
+}

package/build/stories/breadcrumbs/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BreadcrumbArgs } from './_types';
+/**
+ * Breadcrumbs mark and communicate a user’s location in the product.
+ * <hr>
+ * Used for this:
+    - To show the user where they are in a nested navigation
+    - To provide a quick way to navigate to ancestor pages
+ */
+declare const Breadcrumb: (props: BreadcrumbArgs) => JSX.Element;
+export { Breadcrumb };

package/build/stories/breadcrumbs/index.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { BreadcrumbArgs } from "./_types";
+export declare const Default: Story<BreadcrumbArgs>;
+declare const _default: ComponentMeta<(props: BreadcrumbArgs) => JSX.Element>;
+export default _default;

package/build/stories/buttons/anchor/_types.d.ts

@@ -1,3 +1,11 @@
 import { IAnchorProps } from "@zendeskgarden/react-buttons";
 export interface AnchorArgs extends IAnchorProps {
+    /** Applies danger styling */
+    isDanger?: boolean;
+    /**
+     * Attaches `target="_blank"` and `rel="noopener noreferrer"` to an anchor that
+     * navigates to an external resource. This ensures that the anchor is a
+     * safe [cross-origin destination link](https://web.dev/external-anchors-use-rel-noopener/).
+     **/
+    isExternal?: boolean;
 }

package/build/stories/buttons/anchor/index.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="react" />
 import { AnchorArgs } from "./_types";
+/**
+ * The Anchor is a link that helps users navigate from one location to another.
+ * <hr>
+ * Used for this:
+    - To navigate from one page to another
+    - To navigate within a page
+    - To display links alongside text
+ */
 declare const Anchor: (props: AnchorArgs) => JSX.Element;
 export { Anchor };

package/build/stories/buttons/button/_types.d.ts

@@ -1,16 +1,30 @@
-import { IButtonProps, IButtonStartIconProps, IButtonEndIconProps } from "@zendeskgarden/react-buttons";
+import { IButtonProps } from "@zendeskgarden/react-buttons";
 export interface ButtonArgs extends IButtonProps {
     /**
       It's a boolean value that determines whether the button has an icon on the left side.
+      @default false
     */
     hasStartIcon?: boolean;
     /**
       It's a boolean value that determines whether the button has an icon on the right side.
+      @default false
     */
     hasEndIcon?: boolean;
     isStartIconRotated?: boolean;
     isEndIconRotated?: boolean;
-    StartIcon?: IButtonStartIconProps;
-    EndIcon?: IButtonEndIconProps;
+    /** Applies danger styling */
+    isDanger?: boolean;
+    /** Specifies the buton size */
+    size?: 'small' | 'medium' | 'large';
+    /** Stretches the button fill to its container width */
+    isStretched?: boolean;
+    /** Applies neutral button styling */
+    isNeutral?: boolean;
+    /**
+     Definine the button variations, possible values are: {isDefault},
+     {isBasic},{isPrimary}, {isLink}
+        
+     @default isDefault
+     */
     variant?: string;
 }

package/build/stories/buttons/button/index.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
 import { ButtonArgs } from "./_types";
 /**
- *
- * Buttons let users take action quickly. Use a Button to enable actions or decisions that are important to a user’s workflow.
+ * Buttons let users take action quickly.
+ * Use a Button to enable actions or decisions that are important to a user’s workflow.
+ * <hr>
+ * Used for this:
+   - To enable user action
+   - To draw attention to relevant actions in a user's workflow
  */
 declare const Button: {
     (props: ButtonArgs): JSX.Element;

package/build/stories/buttons/button-group/_types.d.ts

@@ -1,3 +1,5 @@
 import { IButtonGroupProps } from "@zendeskgarden/react-buttons";
 export interface ButtonGroupArgs extends IButtonGroupProps {
+    /** Defines the currently selected button in the group */
+    selectedItem?: any;
 }

package/build/stories/buttons/button-group/index.d.ts

@@ -3,7 +3,7 @@ import { ButtonGroupArgs } from "./_types";
 /**
 A Button group lets users make a selection from a set of options.
 
-This is a legacy component and may be deprecated in the future. Garden does not presently recommend the use of Button groups.
+This is a legacy component and may be deprecated in the future. UNGUESS does not presently recommend the use of Button groups.
 **/
 declare const ButtonGroup: (props: ButtonGroupArgs) => JSX.Element;
 export { ButtonGroup };

package/build/stories/buttons/button-group/index.stories.d.ts

@@ -2,6 +2,10 @@
 import { ComponentMeta, Story } from "@storybook/react";
 import { ButtonGroupArgs } from "./_types";
 interface ButtonGroupProps extends ButtonGroupArgs {
+    /**
+     The children of the button group.
+     @default []
+    */
     items: any[];
 }
 export declare const TwoItems: Story<ButtonGroupProps>;