@conveyorhq/arrow-ds 2.0.0-beta.1 → 2.0.0-beta.10

package/src/components/Tag/Tag.story.mdx

@@ -110,7 +110,7 @@ Tags can be rendered as other elements using the `as` prop. If the element is cl
     <Tag
       clickable
       as="a"
-      href="http://google.com"
+      href="http://www.conveyor.com/"
       variant={TAG_VARIANT.PRIMARY}
     >
       Link - Primary

package/src/components/Tag/Tag.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import classNames from "classnames";
 import { BoxProps } from "../Box";
 import { bem } from "../../utilities/bem";
-import { ICON_TYPE, Icon } from "../Icon";
+import { IconType, Icon } from "../Icon";
 import { TagGroup } from "./TagGroup";
 
 const cn = "Tag";
@@ -32,7 +32,7 @@ export interface TagProps extends BoxProps {
   /**
    * Icon to show next to the tag content
    */
-  icon?: ICON_TYPE;
+  icon?: IconType;
 }
 
 export const Tag = ({

package/src/components/Tag/index.css

@@ -20,11 +20,6 @@
   @apply cursor-pointer;
 }
 
-.ads-Tag--clickable:focus {
-  @apply outline-none
-    shadow-focus;
-}
-
 .ads-Tag--primary {
   @apply bg-transparent
     border-brandGreen-400
@@ -32,8 +27,7 @@
 }
 
 .ads-Tag--primary.ads-Tag--clickable:hover,
-.ads-Tag--primary.ads-Tag--clickable:active,
-.ads-Tag--primary.ads-Tag--clickable:focus {
+.ads-Tag--primary.ads-Tag--clickable:active {
   @apply text-brandGreen-500
     border-brandGreen-500;
 }
@@ -44,8 +38,7 @@
 }
 
 .ads-Tag--primary.ads-Tag--filled.ads-Tag--clickable:hover,
-.ads-Tag--primary.ads-Tag--filled.ads-Tag--clickable:active,
-.ads-Tag--primary.ads-Tag--filled.ads-Tag--clickable:focus {
+.ads-Tag--primary.ads-Tag--filled.ads-Tag--clickable:active {
   @apply bg-brandGreen-500
     border-brandGreen-500
     text-white;
@@ -57,8 +50,7 @@
 }
 
 .ads-Tag--secondary.ads-Tag--clickable:hover,
-.ads-Tag--secondary.ads-Tag--clickable:active,
-.ads-Tag--secondary.ads-Tag--clickable:focus {
+.ads-Tag--secondary.ads-Tag--clickable:active {
   @apply border-gray-500
     text-gray-800;
 }
@@ -68,8 +60,7 @@
 }
 
 .ads-Tag--secondary.ads-Tag--filled.ads-Tag--clickable:hover,
-.ads-Tag--secondary.ads-Tag--filled.ads-Tag--clickable:active,
-.ads-Tag--secondary.ads-Tag--filled.ads-Tag--clickable:focus {
+.ads-Tag--secondary.ads-Tag--filled.ads-Tag--clickable:active {
   @apply bg-gray-500;
 }
 
@@ -79,8 +70,7 @@
 }
 
 .ads-Tag--toggleable:hover,
-.ads-Tag--toggleable:active,
-.ads-Tag--toggleable:focus {
+.ads-Tag--toggleable:active {
   @apply border-gray-600
     text-gray-700;
 }
@@ -92,8 +82,7 @@
 }
 
 .ads-Tag--toggleable.ads-Tag--filled:hover,
-.ads-Tag--toggleable.ads-Tag--filled:active,
-.ads-Tag--toggleable.ads-Tag--filled:focus {
+.ads-Tag--toggleable.ads-Tag--filled:active {
   @apply bg-brandGreen-500
   border-brandGreen-500
   text-white;

package/src/components/Text/Text.story.mdx

@@ -0,0 +1,34 @@
+import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
+import {
+  ComponentHeading,
+  ComponentStatus,
+  COMPONENT_STATUS,
+} from "../../storybook-components";
+import { Text } from "./Text";
+
+<Meta title="Components/Typography/Text" component={Text} />
+
+<ComponentHeading
+  componentName="Text"
+  description="A generic container for wrapping text"
+  sourcePath="src/components/Text/Text.tsx"
+  hideDemosLink
+/>
+
+<ComponentStatus status={COMPONENT_STATUS.DEPRECATED} />
+
+This component has been deprecated. Use the `Paragraph`, `Heading` or `Box` components instead.
+
+```jsx
+import { Text } from "@conveyorhq/arrow-ds";
+```
+
+<Preview>
+  <Story name="Text">
+    <Text>This is the Text component</Text>
+  </Story>
+</Preview>
+
+## Props
+
+<Props of={Text} />

package/src/components/Toast/Toast.story.mdx

@@ -210,7 +210,7 @@ message.
             showToast({
               title: "New control created",
               content: (
-                <div>
+                <div className="w-full">
                   <Toast.Link href="/">Access Control Policy</Toast.Link>
                   <Toast.Link href="/">Access Control Policy</Toast.Link>
                   <Toast.Link href="/">Access Control Policy</Toast.Link>

package/src/components/Toast/Toast.tsx

@@ -4,11 +4,11 @@ import classNames from "classnames";
 import { Box, BoxProps } from "../Box";
 import { Flex } from "../Flex";
 import { CloseButton } from "../CloseButton";
-import { StatusIcon } from "../Icon";
+import { Icon, ICON_TYPE, StatusIcon } from "../Icon";
 import { bem } from "../../utilities/bem";
 import { STATUS_VARIANT } from "../../types";
 import { StatusContext } from "../../contexts/status";
-import { ArrowLink, ArrowLinkProps } from "../ArrowLink";
+import { Link, LinkProps } from "../Link";
 
 const cn = "Toast";
 
@@ -37,14 +37,18 @@ export interface ShowToastProps {
   variant?: STATUS_VARIANT;
 }
 
-export const ToastLink = ({ children, className, ...rest }: ArrowLinkProps) => (
-  <ArrowLink
-    className={classNames(bem(cn, { e: "link" }), className)}
-    {...rest}
-  >
-    {children}
-  </ArrowLink>
-);
+export const ToastLink = ({ className, children, ...rest }: LinkProps) => {
+  return (
+    <Link
+      className={classNames(bem(cn, { e: "link" }), className)}
+      noStyles
+      {...rest}
+    >
+      <span className="mr-1">{children}</span>
+      <Icon icon={ICON_TYPE.LONG_ARROW_ALT_RIGHT} />
+    </Link>
+  );
+};
 
 export const ToastMessage = ({
   children,

package/src/components/Toast/index.css

@@ -48,11 +48,13 @@
   @apply items-start
     justify-center
     px-5
+    py-3
     flex-col
     text-left;
 
   grid-row: 1 / -1;
   min-height: 44px;
+  word-break: break-word;
 }
 
 .ads-Toast--withHeader .ads-Toast-body {
@@ -62,8 +64,8 @@
 .ads-Toast-link {
   @apply flex
     items-center
-    w-full
-    h-full
+    justify-between
+    font-medium
     rounded-b
     px-5
     -mx-5;
@@ -72,11 +74,6 @@
   width: calc(100% + theme("width.10"));
 }
 
-.ads-Toast-link:focus {
-  @apply outline-none
-    shadow-focus;
-}
-
 .ads-Toast-link + .ads-Toast-link {
   @apply border-t
     border-border;

package/src/components/Toggle/index.css

@@ -3,13 +3,8 @@
     items-center
     rounded-full
     relative
-    cursor-pointer;
-
-  gap: theme("margin.2");
-}
-
-.ads-Toggle:focus {
-  @apply outline-none;
+    cursor-pointer
+    gap-2;
 }
 
 .ads-Toggle--left {
@@ -46,11 +41,6 @@
   box-shadow: inset 0 0 0 1px theme("colors.brandGreen.400");
 }
 
-.ads-Toggle.isOn:focus .ads-Toggle-track {
-  box-shadow: inset 0 0 0 1px theme("colors.brandGreen.400"),
-    theme("boxShadow.focus");
-}
-
 .ads-Toggle.isOn .ads-Toggle-thumb {
   @apply bg-white
     border-brandGreen-400;
@@ -65,10 +55,6 @@
   box-shadow: inset 0 0 0 1px theme("colors.gray.500");
 }
 
-.ads-Toggle.isOff:focus .ads-Toggle-track {
-  box-shadow: inset 0 0 0 1px theme("colors.gray.500"), theme("boxShadow.focus");
-}
-
 .ads-Toggle.isOff .ads-Toggle-thumb {
   @apply bg-white
   border-gray-500;

package/src/components/Token/Token.story.mdx

@@ -183,7 +183,7 @@ link. We also need to apply some additional visual styles to add some polish.
       <Link
         as={RouterLink}
         to="/"
-        className="text-gray-700 px-3 h-8 flex items-center rounded focus:outline-none focus:shadow-focus"
+        className="text-gray-700 px-3 h-8 flex items-center rounded"
         noStyles
       >
         Monthly Access Control Review
@@ -207,7 +207,7 @@ A button element would work the same way.
   <Story name="Composable example with anchor">
     <Token className="px-0 h-auto ease-all-md hover:bg-gray-400">
       <a
-        className="text-gray-700 px-3 h-8 flex items-center rounded focus:outline-none focus:shadow-focus"
+        className="text-gray-700 px-3 h-8 flex items-center rounded"
         rel="noopener noreferrer"
         target="_blank"
         href="/"

package/src/components/Token/index.css

@@ -34,11 +34,6 @@
     text-iconSm;
 }
 
-.ads-Token-removeBtn:focus {
-  @apply shadow-focus
-    outline-none;
-}
-
 .ads-Token-icon {
   @apply mr-1;
 
@@ -58,8 +53,7 @@
 }
 
 .ads-Token--default .ads-Token-removeBtn:hover,
-.ads-Token--default .ads-Token-removeBtn:active,
-.ads-Token--default .ads-Token-removeBtn:focus {
+.ads-Token--default .ads-Token-removeBtn:active {
   @apply bg-gray-400;
 }
 
@@ -73,8 +67,7 @@
 }
 
 .ads-Token--danger .ads-Token-removeBtn:hover,
-.ads-Token--danger .ads-Token-removeBtn:active,
-.ads-Token--danger .ads-Token-removeBtn:focus {
+.ads-Token--danger .ads-Token-removeBtn:active {
   @apply bg-red-300;
 }