Release/0.6.0 (#92)

* add Button and Card variants * add docs * Revert "add docs" This reverts commit 3e04c70. * Revert "Revert "add docs"" This reverts commit b88affe. * Update fullWidth description
stellar · Jan 26, 2022 · 2b4efff · 2b4efff
1 parent bdfd160
commit 2b4efff
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 5 deletions.
diff --git a/@stellar/design-system-website/package.json b/@stellar/design-system-website/package.json
@@ -13,7 +13,7 @@
     "lint-tsc": "tsc --noEmit"
   },
   "dependencies": {
-    "@stellar/design-system": "^0.5.0",
+    "@stellar/design-system": "^0.6.0",
     "lodash": "^4.17.21",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.2",

diff --git a/@stellar/design-system-website/src/constants/details/buttons.tsx b/@stellar/design-system-website/src/constants/details/buttons.tsx
@@ -22,6 +22,7 @@ export const buttons: ComponentDetails = {
         <Button disabled>Label</Button>,
         <Button isLoading>Label</Button>,
         <Button size={Button.size.small}>Label</Button>,
+        <Button fullWidth>Label</Button>,
       ],
     },
     {
@@ -38,6 +39,9 @@ export const buttons: ComponentDetails = {
         <Button iconLeft={<Icon.Check />} size={Button.size.small}>
           Label
         </Button>,
+        <Button iconLeft={<Icon.Check />} fullWidth>
+          Label
+        </Button>,
       ],
     },
     {
@@ -54,6 +58,9 @@ export const buttons: ComponentDetails = {
         <Button iconRight={<Icon.Check />} size={Button.size.small}>
           Label
         </Button>,
+        <Button iconRight={<Icon.Check />} fullWidth>
+          Label
+        </Button>,
       ],
     },
     {
@@ -70,6 +77,9 @@ export const buttons: ComponentDetails = {
         <Button variant={Button.variant.secondary} size={Button.size.small}>
           Label
         </Button>,
+        <Button variant={Button.variant.secondary} fullWidth>
+          Label
+        </Button>,
       ],
     },
     {
@@ -100,6 +110,13 @@ export const buttons: ComponentDetails = {
         >
           Label
         </Button>,
+        <Button
+          variant={Button.variant.secondary}
+          iconLeft={<Icon.Check />}
+          fullWidth
+        >
+          Label
+        </Button>,
       ],
     },
     {
@@ -130,6 +147,13 @@ export const buttons: ComponentDetails = {
         >
           Label
         </Button>,
+        <Button
+          variant={Button.variant.secondary}
+          iconRight={<Icon.Check />}
+          fullWidth
+        >
+          Label
+        </Button>,
       ],
     },
     {
@@ -146,6 +170,9 @@ export const buttons: ComponentDetails = {
         <Button variant={Button.variant.tertiary} size={Button.size.small}>
           Label
         </Button>,
+        <Button variant={Button.variant.tertiary} fullWidth>
+          Label
+        </Button>,
       ],
     },
     {
@@ -176,6 +203,13 @@ export const buttons: ComponentDetails = {
         >
           Label
         </Button>,
+        <Button
+          variant={Button.variant.tertiary}
+          iconLeft={<Icon.Check />}
+          fullWidth
+        >
+          Label
+        </Button>,
       ],
     },
     {
@@ -206,6 +240,13 @@ export const buttons: ComponentDetails = {
         >
           Label
         </Button>,
+        <Button
+          variant={Button.variant.tertiary}
+          iconRight={<Icon.Check />}
+          fullWidth
+        >
+          Label
+        </Button>,
       ],
     },
   ],
@@ -252,6 +293,13 @@ export const buttons: ComponentDetails = {
       optional: true,
       description: "Size of the button",
     },
+    {
+      prop: "fullWidth",
+      type: ["Boolean"],
+      default: "false",
+      optional: true,
+      description: "Sets width of the button to parent container",
+    },
   ],
   externalProps: {
     link: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes",

diff --git a/@stellar/design-system-website/src/constants/details/cards.tsx b/@stellar/design-system-website/src/constants/details/cards.tsx
@@ -21,6 +21,11 @@ export const cards: ComponentDetails = {
         </Card>,
       ],
     },
+    {
+      title: "Card with highlight",
+      description: "",
+      component: [<Card variant={Card.variant.highlight}>Content</Card>],
+    },
   ],
   props: [
     {
@@ -44,6 +49,13 @@ export const cards: ComponentDetails = {
       optional: true,
       description: "Remove card shadow",
     },
+    {
+      prop: "variant",
+      type: ["default", "highlight"],
+      default: "default",
+      optional: true,
+      description: "Variant of the card",
+    },
   ],
   externalProps: {
     link: "",

diff --git a/@stellar/design-system-website/src/generated/gitInfo.ts b/@stellar/design-system-website/src/generated/gitInfo.ts
@@ -1 +1 @@
-export default { commitHash: "6f4399e" };
+export default { commitHash: "f86f428" };
diff --git a/@stellar/design-system/package.json b/@stellar/design-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stellar/design-system",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "author": "Stellar Development Foundation <[email protected]>",
   "description": "Components for Stellar Development Foundation’s design system",
   "license": "Apache-2.0",

diff --git a/@stellar/design-system/src/components/Button/index.tsx b/@stellar/design-system/src/components/Button/index.tsx
@@ -25,6 +25,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
   isLoading?: boolean;
   size?: ButtonSize;
+  fullWidth?: boolean;
   children: string | React.ReactNode;
 }
 
@@ -34,12 +35,14 @@ export const Button: React.FC<ButtonProps> & ButtonComponent = ({
   variant = ButtonVariant.primary,
   isLoading,
   size = ButtonSize.default,
+  fullWidth,
   children,
   ...props
 }) => {
   const additionalClasses = [
     `Button--${variant}`,
     ...(size !== ButtonSize.default ? [`Button--${size}`] : []),
+    ...(fullWidth ? [`Button--full-width`] : []),
   ].join(" ");
 
   return (

diff --git a/@stellar/design-system/src/components/Button/styles.scss b/@stellar/design-system/src/components/Button/styles.scss
@@ -80,6 +80,10 @@
     }
   }
 
+  &--full-width {
+    width: 100%;
+  }
+
   &:disabled {
     cursor: not-allowed;
     opacity: var(--opacity-disabled-button);

diff --git a/@stellar/design-system/src/components/Card/index.tsx b/@stellar/design-system/src/components/Card/index.tsx
@@ -1,23 +1,39 @@
 import React from "react";
 import "./styles.scss";
 
+enum CardVariant {
+  default = "default",
+  highlight = "highlight",
+}
+
+interface CardComponent {
+  variant: typeof CardVariant;
+}
+
 interface CardProps {
+  variant?: CardVariant;
   children: React.ReactNode;
   noPadding?: boolean;
   noShadow?: boolean;
 }
 
-export const Card = ({ children, noPadding, noShadow }: CardProps) => {
+export const Card: React.FC<CardProps> & CardComponent = ({
+  variant = CardVariant.default,
+  children,
+  noPadding,
+  noShadow,
+}: CardProps) => {
   const customStyle = {
     ...(noPadding ? { "--Card-padding": 0 } : {}),
     ...(noShadow ? { "--Card-shadow": "none" } : {}),
   } as React.CSSProperties;
 
   return (
-    <div className="Card" style={customStyle}>
+    <div className={`Card Card--${variant}`} style={customStyle}>
       {children}
     </div>
   );
 };
 
 Card.displayName = "Card";
+Card.variant = CardVariant;
diff --git a/@stellar/design-system/src/components/Card/styles.scss b/@stellar/design-system/src/components/Card/styles.scss
@@ -9,4 +9,14 @@
   height: 100%;
   padding: var(--Card-padding);
   width: 100%;
+
+  &--default {
+    background-color: var(--pal-background-primary);
+    border-color: var(--pal-border-primary);
+  }
+
+  &--highlight {
+    background-color: var(--pal-background-secondary);
+    border-color: var(--pal-background-secondary);
+  }
 }