chore(@clayui/button): LPD-76275 Update storybook with outline and translucent examples

Author: pat270

packages/clay-button/stories/Button.stories.tsx

@@ -118,3 +118,165 @@ export const Icon = () => (
 		/>
 	</>
 );
+
+export const OutlineBorderless = (args: any) => (
+	<>
+		<div className="p-4">
+			<ClayButton
+				borderless
+				className="mr-2"
+				displayType="primary"
+				outline
+				size={args.size}
+			>
+				Primary
+			</ClayButton>
+			<ClayButton
+				borderless
+				className="mr-2"
+				displayType="secondary"
+				outline
+				size={args.size}
+			>
+				Secondary
+			</ClayButton>
+			<ClayButton
+				borderless
+				className="mr-2"
+				displayType="info"
+				outline
+				size={args.size}
+			>
+				Info
+			</ClayButton>
+			<ClayButton
+				borderless
+				className="mr-2"
+				displayType="success"
+				outline
+				size={args.size}
+			>
+				Success
+			</ClayButton>
+			<ClayButton
+				borderless
+				className="mr-2"
+				displayType="warning"
+				outline
+				size={args.size}
+			>
+				Warning
+			</ClayButton>
+			<ClayButton
+				borderless
+				className="mr-2"
+				displayType="danger"
+				outline
+				size={args.size}
+			>
+				Danger
+			</ClayButton>
+			<ClayButton
+				borderless
+				className="mr-2"
+				displayType="light"
+				outline
+				size={args.size}
+			>
+				Light
+			</ClayButton>
+			<ClayButton
+				borderless
+				className="mr-2"
+				displayType="dark"
+				outline
+				size={args.size}
+			>
+				Dark
+			</ClayButton>
+		</div>
+		<div className="bg-dark p-4 text-white">
+			<div className="h4">clay-dark</div>
+			<ClayButton
+				borderless
+				className="mr-2"
+				dark
+				displayType="primary"
+				outline
+				size={args.size}
+			>
+				Primary
+			</ClayButton>
+			<ClayButton
+				borderless
+				className="mr-2"
+				dark
+				displayType="secondary"
+				outline
+				size={args.size}
+			>
+				Secondary
+			</ClayButton>
+			<ClayButton
+				borderless
+				className="mr-2"
+				dark
+				displayType="info"
+				outline
+				size={args.size}
+			>
+				Info
+			</ClayButton>
+			<ClayButton
+				borderless
+				className="mr-2"
+				dark
+				displayType="success"
+				outline
+				size={args.size}
+			>
+				Success
+			</ClayButton>
+			<ClayButton
+				borderless
+				className="mr-2"
+				dark
+				displayType="warning"
+				outline
+				size={args.size}
+			>
+				Warning
+			</ClayButton>
+			<ClayButton
+				borderless
+				className="mr-2"
+				dark
+				displayType="danger"
+				outline
+				size={args.size}
+			>
+				Danger
+			</ClayButton>
+			<ClayButton
+				borderless
+				className="mr-2"
+				dark
+				displayType="light"
+				outline
+				size={args.size}
+			>
+				Light
+			</ClayButton>
+			<ClayButton
+				borderless
+				className="mr-2"
+				dark
+				displayType="dark"
+				outline
+				size={args.size}
+			>
+				Dark
+			</ClayButton>
+		</div>
+	</>
+);