From 9b79ed760340da2b0202e29c1a310fbd58b9fa93 Mon Sep 17 00:00:00 2001 From: Saad Iqbal Date: Tue, 23 Apr 2024 15:49:52 +0500 Subject: [PATCH 1/5] Tip on Potlock Button Variatns --- apps/potlock/widget/Components/ui/Button.jsx | 121 +++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 apps/potlock/widget/Components/ui/Button.jsx diff --git a/apps/potlock/widget/Components/ui/Button.jsx b/apps/potlock/widget/Components/ui/Button.jsx new file mode 100644 index 0000000..1ecd64e --- /dev/null +++ b/apps/potlock/widget/Components/ui/Button.jsx @@ -0,0 +1,121 @@ +const StyledButton = styled.button` + all: unset; + width: 120px; + height: 22px; + border-radius: 6px; + padding: 10px 16px 10px 12px; + justify-content: center; + align-items: center; + display: inline-flex; + gap: 8px; + font-size: 14px; + font-weight: 500; + // font-family: "Mona Sans", sans-serif; + line-height: 22px; + + text-align: center; + font-feature-settings: "ss01" on, "salt" on; + /* Mona sans/Text sm/14px:Medium */ + + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 22px; /* 157.143% */ + + transition: all 300ms; + + svg path { + fill: ${(props) => { + switch (props.variant) { + case "outline": + return "#656565"; + case "tonal": + return "#656565"; + case "standard": + return "#FFFFFF"; + case "primary": + return "#FFFFFF"; + default: + return "#656565"; + } + }}; + } + + background: ${(props) => { + switch (props.variant) { + case "outline": + return "var(--button-outline-bg, Neutral/White)"; + case "tonal": + return "var(--button-tonal-bg,#FEF6EE) "; + case "standard": + return "var(--button-standard-bg, #3D3D3D)"; + case "primary": + return "var(--button-primary-bg, #DD3345)"; + } + }}; + + color: ${(props) => { + switch (props.variant) { + case "outline": + return "var(--button-outline-color, #292929)"; + case "tonal": + return "var(--button-tonal-color,#292929) "; + case "standard": + return "var(--button-standard-color, #FFFFFF)"; + case "primary": + return "var(--button-primary-color, #FFFFFF)"; + } + }}; + + box-shadow: ${(props) => { + switch (props.variant) { + case "outline": + return "0px 0px 0px 1px rgba(15, 15, 15, 0.15), 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 4px -1px rgba(15, 15, 15, 0.15);"; + case "tonal": + return "0px 2px 4px -1px #FFF inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.84), 0px 1px 1px 0px rgba(15, 15, 15, 0.15), 0px 2px 4px -1px rgba(15, 15, 15, 0.15), 0px -2px 0px 0px rgba(0, 0, 0, 0.84) inset;"; + case "standard": + return "0px 1px 1px 0px rgba(235, 235, 235, 0.15) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.84), 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 4px -1px rgba(15, 15, 15, 0.15);"; + case "primary": + return "0px 2px 4px -1px #F6767A inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.84), 0px 1px 1px 0px rgba(15, 15, 15, 0.15), 0px 2px 4px -1px rgba(15, 15, 15, 0.15), 0px -2px 0px 0px rgba(0, 0, 0, 0.84) inset;"; + } + }}; + + &:hover:not(:disabled) { + background: ${(props) => { + switch (props.variant) { + case "primary": + return "var(--button-primary-hover-bg, #F6767A)"; + case "outline": + return "var(--button-outline-hover-bg, rgba(15, 15, 15, 0.15))"; + case "standard": + return "var(--button-outline-hover-bg, #b0b0b0)"; + case "tonal": + return "var(--button-standard-hover-bg, $fff)"; + } + }}; + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed !important; + } +`; + +const Button = ({ children, onClick, href, ...restProps }) => { + if (href) { + return ( + + + {children} + + + ); + } + return ( + + {children} + + ); +}; + +return { Button }; From f138d43cc14e1ab90877b467d00ddd061ba8c521 Mon Sep 17 00:00:00 2001 From: Saad Iqbal Date: Wed, 24 Apr 2024 08:42:28 +0500 Subject: [PATCH 2/5] Components Library --- apps/potlock/widget/Components/ui/Button.jsx | 29 +- apps/potlock/widget/Library.jsx | 479 +++++++++++++++++++ 2 files changed, 501 insertions(+), 7 deletions(-) create mode 100644 apps/potlock/widget/Library.jsx diff --git a/apps/potlock/widget/Components/ui/Button.jsx b/apps/potlock/widget/Components/ui/Button.jsx index 1ecd64e..c079287 100644 --- a/apps/potlock/widget/Components/ui/Button.jsx +++ b/apps/potlock/widget/Components/ui/Button.jsx @@ -22,7 +22,7 @@ const StyledButton = styled.button` font-weight: 500; line-height: 22px; /* 157.143% */ - transition: all 300ms; + transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; svg path { fill: ${(props) => { @@ -72,7 +72,7 @@ const StyledButton = styled.button` case "outline": return "0px 0px 0px 1px rgba(15, 15, 15, 0.15), 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 4px -1px rgba(15, 15, 15, 0.15);"; case "tonal": - return "0px 2px 4px -1px #FFF inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.84), 0px 1px 1px 0px rgba(15, 15, 15, 0.15), 0px 2px 4px -1px rgba(15, 15, 15, 0.15), 0px -2px 0px 0px rgba(0, 0, 0, 0.84) inset;"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84), 0px 1px 1px 0px #FFF inset, 0px -2px 0px 0px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 0px rgba(15, 15, 15, 0.15), 0px 1px 4px -1px rgba(5, 5, 5, 0.08);"; case "standard": return "0px 1px 1px 0px rgba(235, 235, 235, 0.15) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.84), 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 4px -1px rgba(15, 15, 15, 0.15);"; case "primary": @@ -81,16 +81,31 @@ const StyledButton = styled.button` }}; &:hover:not(:disabled) { - background: ${(props) => { + box-shadow: ${(props) => { switch (props.variant) { case "primary": - return "var(--button-primary-hover-bg, #F6767A)"; + return " 0px 2px 4px -1px #ED464F inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.84), 0px 1px 1px 0px rgba(15, 15, 15, 0.15), 0px 2px 4px -1px rgba(15, 15, 15, 0.15);"; case "outline": - return "var(--button-outline-hover-bg, rgba(15, 15, 15, 0.15))"; + return " 0px 1px 4px -1px #0F0F0F26, 0px 1px 2px 0px #0F0F0F26, 0px 0px 0px 1px #0F0F0F26,"; case "standard": - return "var(--button-outline-hover-bg, #b0b0b0)"; + return " 0px 1px 1px 0px #01010185,0px 0px 0px 1px #000000D6,0px 1px 1px 0px #EBEBEB26 inset;"; case "tonal": - return "var(--button-standard-hover-bg, $fff)"; + return "0px 2px 4px -1px #0F0F0F26, 0px 1px 1px 0px #0F0F0F26, 0px 0px 0px 1px #000000D6, 0px 2px 4px -1px #FFFFFF inset;"; + } + }}; + } + + &:active:not(:disabled) { + box-shadow: ${(props) => { + switch (props.variant) { + case "outline": + return "0px 2px 4px -1px #0F0F0F26, 0px 1px 1px 0px #0F0F0F26, 0px 0px 0px 1px #000000D6, 0px 2px 4px -1px #FFFFFF inset;"; + case "primary": + return "0px 2px 4px -1px #0F0F0F26, 0px 1px 1px 0px #0F0F0F26, 0px 0px 0px 1px #000000D6, 0px 2px 4px -1px #FFFFFF inset;"; + case "standard": + return "0px 2px 4px -1px #0F0F0F26, 0px 1px 1px 0px #0F0F0F26, 0px 0px 0px 1px #000000D6, 0px 2px 4px -1px #FFFFFF inset;"; + case "tonal": + return "0px 2px 4px -1px rgba(1, 1, 1, 0.35) inset, 0px 1px 1px -1px #FFF, 0px 0px 0px 1px rgba(2, 2, 2, 0.73);"; } }}; } diff --git a/apps/potlock/widget/Library.jsx b/apps/potlock/widget/Library.jsx new file mode 100644 index 0000000..e21ae7a --- /dev/null +++ b/apps/potlock/widget/Library.jsx @@ -0,0 +1,479 @@ +const { Button } = VM.require("potlock.near/widget/Components.ui.Button") || { + Button: () => <>, +}; +// states +const [checked, setChecked] = useState(false); +const ButtonPreview = ( +
+
+ + + + +
+
+ + + + +
+
+); +const components = [ + { + name: "Button", + category: "Buttons/Navigation", + widgetSrc: "potlock.near/widget/Components.ui.Button", + description: "Button component with four different variants, and icon support.", + requiredProps: { + children: "Button Text", + onClick: "Callback function to handle button click", + }, + optionalProps: { + id: "ID of the button", + variant: "Variant of the button (default, primary, outline)", + type: "Type of the button (normal, icon)", + className: "Additional classnames for button", + style: "Additional styles for button", + }, + preview: ButtonPreview, + embedCode: ` + const { Button } = VM.require("potlock.near/widget/Components.ui.Button"); + return ( +
+
+ +
+
+ );`, + }, +]; +const renderProps = (props, optional) => { + return Object.entries(props || {}).map(([key, desc]) => { + return ( + + + {key} + + + + + + ); + }); +}; +const renderComponent = (component, index) => { + const id = component.name.toLowerCase().replace(" ", "-"); + return ( +
+
+ +

{component.name}

+ +

{component.description}

+

Preview

+ {component.preview} +

Component

+
+
+ {state.copied ? "Copied!" : "Copy to clipboard"}} + > + { + clipboard.writeText(props.text).then(() => { + State.update({ copied: true }); + if (props.onCopy) { + props.onCopy(props.text); + } + }); + }} + src="mob.near/widget/CopyButton" + props={{ + text: component.widgetSrc, + label: component.widgetSrc, + }} + /> + +
+ {/* */} +
+

Props

+ + + + + + + + + {renderProps(component.requiredProps)} + {renderProps(component.optionalProps, true)} + +
KeyDescription
+

Example

+
+ +
+ +
+
+
+
+ ); +}; +const Wrapper = styled.div` + h2, + h3, + label, + p { + color: black; + } + .component { + padding: 0.5em 12px; + padding-bottom: 0; + margin-bottom: 3em; + &:hover { + background: rgba(0, 0, 0, 0.03); + } + table, + th, + td { + background: #fff; + color: #000; + } + label { + font-size: 20px; + } + .code { + display: inline-flex; + line-height: normal; + border-radius: 0.3em; + padding: 0 4px; + border: 1px solid #ddd; + background: rgba(0, 0, 0, 0.03); + font-family: var(--bs-font-monospace); + } + .path { + } + .preview { + background-color: white; + padding: 12px; + border: 1px solid #eee; + border-radius: 12px; + pre { + margin-bottom: 0; + } + } + .props { + .prop-key { + background: #f7f7f7; + border: 1px solid #dddddd; + color: black; + border-radius: 8px; + padding: 2px 4px; + font-weight: 600; + &.optional { + font-weight: 400; + } + } + .prop-desc { + p { + margin-bottom: 0; + color: #000; + } + } + } + .embed-code { + position: relative; + .embed-copy { + position: absolute; + top: 18px; + right: 10px; + } + } + } +`; +const renderMenuItem = (c, i) => { + const prev = i ? components[i - 1] : null; + const res = []; + const id = c.name.toLowerCase().replaceAll(" ", "-"); + res.push( +
+ + + + {" "} + {c.name} + +
+ ); + return res; +}; +const Grid = styled.div` + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 1rem; + .main { + grid-column: span 4 / span 4; + } + .aside { + grid-column: span 1 / span 1; + border-radius: 16px; + border: 1px solid var(--stroke-color, rgba(154, 127, 127, 0.2)); + background: var(--bg-1, #fff); + width: 100%; + min-height: 80vh; + display: flex; + padding: 24px 12px; + flex-direction: column; + align-items: flex-start; + gap: 16px; + margin-bottom: 1rem; + .menu-item { + width: 100%; + display: flex; + } + a { + all: unset; + display: inline-flex; + padding: 8px 12px; + justify-content: flex-start; + align-items: center; + gap: 4px; + border-radius: 8px; + font-size: 14px; + font-weight: 500; + transition: all 300ms; + background: var(--button-outline-bg, #fff); + color: var(--button-outline-color, #000); + border: 1px solid var(--stroke-color, rgba(154, 127, 127, 0.2)) !important; + cursor: pointer; + align-self: stretch; + width: 100%; + text-align: left; + &:hover { + background: var(--button-outline-hover-bg, #cdcdcd); + color: var(--button-outline-hover-color, #000); + } + } + + svg path { + fill: #000; + } + } + .top { + grid-column: span 1 / span 1; + border-radius: 16px; + border: 1px solid var(--stroke-color, rgba(154, 127, 127, 0.2)); + background: var(--bg-1, #fff); + width: 100%; + display: flex; + padding: 24px 12px; + flex-direction: column; + align-items: flex-start; + gap: 16px; + margin-bottom: 1rem; + .menu-item { + width: 100%; + display: flex; + } + a { + all: unset; + display: inline-flex; + padding: 8px 12px; + justify-content: flex-start; + align-items: center; + gap: 4px; + border-radius: 8px; + font-size: 14px; + font-weight: 500; + transition: all 300ms; + background: var(--button-outline-bg, #fff); + color: var(--button-outline-color, #000); + border: 1px solid var(--stroke-color, rgba(154, 127, 127, 0.2)) !important; + cursor: pointer; + align-self: stretch; + width: 100%; + text-align: left; + &:hover { + background: var(--button-outline-hover-bg, #cdcdcd); + color: var(--button-outline-hover-color, #000); + } + } + + svg path { + fill: #000; + } + } + @media screen and (max-width: 768px) { + display: flex; + flex-direction: column; + gap: 1rem; + .aside { + flex-direction: row; + border: none; + overflow-x: auto; + min-height: auto; + gap: 2rem; + .menu-item { + width: max-content; + flex-shrink: 0; + a { + flex-shrink: 0; + } + } + } + } +`; +return ( + +
+ {components.map((component, index) => renderMenuItem(component, index))} +
+ +
+

+ Library +

+
+ {components.map((component, index) => renderComponent(component, index))} + + +); From 049ab397c8f3c100e34b7d7655b5604cb241a921 Mon Sep 17 00:00:00 2001 From: Saad Iqbal Date: Thu, 25 Apr 2024 20:23:29 +0500 Subject: [PATCH 3/5] Button Component and Component Library Draft --- apps/potlock/widget/Components/ui/Button.jsx | 168 ++++++++++++++++--- apps/potlock/widget/Library.jsx | 56 +++++-- 2 files changed, 188 insertions(+), 36 deletions(-) diff --git a/apps/potlock/widget/Components/ui/Button.jsx b/apps/potlock/widget/Components/ui/Button.jsx index c079287..6b567f3 100644 --- a/apps/potlock/widget/Components/ui/Button.jsx +++ b/apps/potlock/widget/Components/ui/Button.jsx @@ -3,7 +3,7 @@ const StyledButton = styled.button` width: 120px; height: 22px; border-radius: 6px; - padding: 10px 16px 10px 12px; + padding: 9px 16px 9px 12px; justify-content: center; align-items: center; display: inline-flex; @@ -28,15 +28,13 @@ const StyledButton = styled.button` fill: ${(props) => { switch (props.variant) { case "outline": - return "#656565"; + return "rgba(123, 123, 123, 1)"; case "tonal": return "#656565"; case "standard": return "#FFFFFF"; case "primary": return "#FFFFFF"; - default: - return "#656565"; } }}; } @@ -51,6 +49,8 @@ const StyledButton = styled.button` return "var(--button-standard-bg, #3D3D3D)"; case "primary": return "var(--button-primary-bg, #DD3345)"; + case "no-border-primary-tonal": + return "#fff"; } }}; @@ -64,19 +64,21 @@ const StyledButton = styled.button` return "var(--button-standard-color, #FFFFFF)"; case "primary": return "var(--button-primary-color, #FFFFFF)"; + case "no-border-primary-tonal": + return "hsla(354, 71%, 53%, 1)"; } }}; box-shadow: ${(props) => { switch (props.variant) { case "outline": - return "0px 0px 0px 1px rgba(15, 15, 15, 0.15), 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 4px -1px rgba(15, 15, 15, 0.15);"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 1px 0px rgba(15, 15, 15, 0.15) inset, 0px -1px 4px 0px rgba(5, 5, 5, 0.08) inset;"; case "tonal": - return "0px 0px 0px 1px rgba(0, 0, 0, 0.84), 0px 1px 1px 0px #FFF inset, 0px -2px 0px 0px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 0px rgba(15, 15, 15, 0.15), 0px 1px 4px -1px rgba(5, 5, 5, 0.08);"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.84);"; case "standard": - return "0px 1px 1px 0px rgba(235, 235, 235, 0.15) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.84), 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 4px -1px rgba(15, 15, 15, 0.15);"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.30) inset, 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 3px -1px rgba(5, 5, 5, 0.08);"; case "primary": - return "0px 2px 4px -1px #F6767A inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.84), 0px 1px 1px 0px rgba(15, 15, 15, 0.15), 0px 2px 4px -1px rgba(15, 15, 15, 0.15), 0px -2px 0px 0px rgba(0, 0, 0, 0.84) inset;"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(246, 118, 122, 0.50) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.84);"; } }}; @@ -84,53 +86,173 @@ const StyledButton = styled.button` box-shadow: ${(props) => { switch (props.variant) { case "primary": - return " 0px 2px 4px -1px #ED464F inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.84), 0px 1px 1px 0px rgba(15, 15, 15, 0.15), 0px 2px 4px -1px rgba(15, 15, 15, 0.15);"; + return " 0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #ED464F inset;"; case "outline": - return " 0px 1px 4px -1px #0F0F0F26, 0px 1px 2px 0px #0F0F0F26, 0px 0px 0px 1px #0F0F0F26,"; + return " 0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset;"; case "standard": - return " 0px 1px 1px 0px #01010185,0px 0px 0px 1px #000000D6,0px 1px 1px 0px #EBEBEB26 inset;"; + return " 0px 0px 0px 1px rgba(0, 0, 0, 0.84), 0px 1px 1px 0px rgba(235, 235, 235, 0.15) inset;"; case "tonal": - return "0px 2px 4px -1px #0F0F0F26, 0px 1px 1px 0px #0F0F0F26, 0px 0px 0px 1px #000000D6, 0px 2px 4px -1px #FFFFFF inset;"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset;"; + } + }}; + background: ${(props) => { + switch (props.variant) { + case "primary": + return " #DD3345"; + case "outline": + return "Neutral/50"; + case "standard": + return " #525252"; + case "tonal": + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset;"; } }}; } - &:active:not(:disabled) { + &:focus:not(:disabled) { box-shadow: ${(props) => { switch (props.variant) { case "outline": - return "0px 2px 4px -1px #0F0F0F26, 0px 1px 1px 0px #0F0F0F26, 0px 0px 0px 1px #000000D6, 0px 2px 4px -1px #FFFFFF inset;"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; case "primary": - return "0px 2px 4px -1px #0F0F0F26, 0px 1px 1px 0px #0F0F0F26, 0px 0px 0px 1px #000000D6, 0px 2px 4px -1px #FFFFFF inset;"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; case "standard": - return "0px 2px 4px -1px #0F0F0F26, 0px 1px 1px 0px #0F0F0F26, 0px 0px 0px 1px #000000D6, 0px 2px 4px -1px #FFFFFF inset;"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.30) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; case "tonal": - return "0px 2px 4px -1px rgba(1, 1, 1, 0.35) inset, 0px 1px 1px -1px #FFF, 0px 0px 0px 1px rgba(2, 2, 2, 0.73);"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; } }}; } + /* &:disabled { + color: ${(props) => { + switch (props.variant) { + case "outline": + return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset, 0px 2px 4px -1px rgba(0, 0, 0, 0.22) inset;"; + case "standard": + return "Neutral/400"; + } + }}; + + box-shadow: ${(props) => { + switch (props.variant) { + case "outline": + return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset, 0px 2px 4px -1px rgba(0, 0, 0, 0.22) inset;"; + + case "standard": + return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset;"; + } + }}; + background: ${(props) => { + switch (props.variant) { + case "outline": + return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset, 0px 2px 4px -1px rgba(0, 0, 0, 0.22) inset;"; + + case "standard": + return "hsla(0, 0%, 65%, 1)"; + } + }}; + } */ + &:disabled { - opacity: 0.5; - cursor: not-allowed !important; + color: ${(props) => { + switch (props.variant) { + case "outline": + return "hsla(0, 0%, 78%, 1)"; // Adjust color value + case "standard": + return "hsla(0, 0%, 65%, 1)"; // Use CSS variable for color or specify a fallback + default: + return "inherit"; // Fallback to default color + } + }}; + + box-shadow: ${(props) => { + switch (props.variant) { + case "outline": + return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset;"; // Adjust box-shadow value + case "standard": + return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset;"; // Adjust box-shadow value + default: + return "none"; // No box-shadow for other variants + } + }}; + background: ${(props) => { + switch (props.variant) { + case "outline": + return "var(--button-outline-bg-disabled, #fff)"; // Use CSS variable for background or specify a fallback + case "standard": + return "var(--button-standard-bg-disabled, #EBEBEB)"; // Use CSS variable for background or specify a fallback + default: + return "inherit"; // Fallback to default background + } + }}; } `; -const Button = ({ children, onClick, href, ...restProps }) => { +const TipOnPotlock = ({ variant, onClick, href, ...restProps }) => { + if (href) { + return ( + + + + + + + Tip on Potlock + + + ); + } + return ( + + + + + + Tip on Potlock + + ); +}; + +const Button = ({ disabled, children, onClick, href, ...restProps }) => { if (href) { return ( - + {children} ); } return ( - + {children} ); }; -return { Button }; +return { Button, TipOnPotlock }; diff --git a/apps/potlock/widget/Library.jsx b/apps/potlock/widget/Library.jsx index e21ae7a..209ed7d 100644 --- a/apps/potlock/widget/Library.jsx +++ b/apps/potlock/widget/Library.jsx @@ -1,5 +1,6 @@ -const { Button } = VM.require("potlock.near/widget/Components.ui.Button") || { +const { Button, TipOnPotlock } = VM.require("potlock.near/widget/Components.ui.Button") || { Button: () => <>, + TipOnPotlock: () => <>, }; // states const [checked, setChecked] = useState(false); @@ -91,6 +92,18 @@ const ButtonPreview = ( ); + +const TipOnPotlockPreview = ( +
+
+ + + + +
+
+); + const components = [ { name: "Button", @@ -103,8 +116,7 @@ const components = [ }, optionalProps: { id: "ID of the button", - variant: "Variant of the button (default, primary, outline)", - type: "Type of the button (normal, icon)", + variant: "Variant of the button (outline, primary, standard, tonal)", className: "Additional classnames for button", style: "Additional styles for button", }, @@ -147,6 +159,33 @@ const components = [ );`, }, + { + name: "Public Goods Legos", + category: "Buttons/Navigation", + widgetSrc: "potlock.near/widget/Components.ui.Button", + description: "Button component with four different variants, and icon support.", + requiredProps: { + onClick: "Callback function to handle button click", + }, + optionalProps: { + id: "ID of the button", + variant: "Variant of the button (outline, primary, standard, tonal)", + + className: "Additional classnames for button", + style: "Additional styles for button", + }, + preview: TipOnPotlockPreview, + embedCode: ` + const { TipOnPotlock } = VM.require("potlock.near/widget/Components.ui.Button"); + return ( +
+ + + + +
+ );`, + }, ]; const renderProps = (props, optional) => { return Object.entries(props || {}).map(([key, desc]) => { @@ -163,7 +202,7 @@ const renderProps = (props, optional) => { }); }; const renderComponent = (component, index) => { - const id = component.name.toLowerCase().replace(" ", "-"); + const id = component.name.toLowerCase().replace(/ /g, "-"); return (
@@ -197,15 +236,6 @@ const renderComponent = (component, index) => { />
- {/* */}

Props

From 81f41be18a104d69ed7abb6649f9a3bcacf346ad Mon Sep 17 00:00:00 2001 From: Saad Iqbal Date: Sat, 27 Apr 2024 17:14:02 +0500 Subject: [PATCH 4/5] Comments Resolved --- apps/potlock/widget/Components/ui/Button.jsx | 112 +++++++++++-------- apps/potlock/widget/Library.jsx | 27 ++++- 2 files changed, 85 insertions(+), 54 deletions(-) diff --git a/apps/potlock/widget/Components/ui/Button.jsx b/apps/potlock/widget/Components/ui/Button.jsx index 6b567f3..aa8d503 100644 --- a/apps/potlock/widget/Components/ui/Button.jsx +++ b/apps/potlock/widget/Components/ui/Button.jsx @@ -12,7 +12,6 @@ const StyledButton = styled.button` font-weight: 500; // font-family: "Mona Sans", sans-serif; line-height: 22px; - text-align: center; font-feature-settings: "ss01" on, "salt" on; /* Mona sans/Text sm/14px:Medium */ @@ -22,7 +21,15 @@ const StyledButton = styled.button` font-weight: 500; line-height: 22px; /* 157.143% */ - transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; + transition: all 50ms ease; + + flex-direction: ${(props) => { + if (props.direction === "right") { + return "row"; + } else if (props.direction === "left") { + return "row-reverse"; + } + }}; svg path { fill: ${(props) => { @@ -35,6 +42,8 @@ const StyledButton = styled.button` return "#FFFFFF"; case "primary": return "#FFFFFF"; + case "brand-outline": + return "hsla(358, 88%, 71%, 1)"; } }}; } @@ -49,8 +58,8 @@ const StyledButton = styled.button` return "var(--button-standard-bg, #3D3D3D)"; case "primary": return "var(--button-primary-bg, #DD3345)"; - case "no-border-primary-tonal": - return "#fff"; + case "brand-outline": + return "hsla(0, 0%, 100%, 0.01)"; } }}; @@ -64,7 +73,7 @@ const StyledButton = styled.button` return "var(--button-standard-color, #FFFFFF)"; case "primary": return "var(--button-primary-color, #FFFFFF)"; - case "no-border-primary-tonal": + case "brand-outline": return "hsla(354, 71%, 53%, 1)"; } }}; @@ -72,27 +81,38 @@ const StyledButton = styled.button` box-shadow: ${(props) => { switch (props.variant) { case "outline": - return "0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 1px 0px rgba(15, 15, 15, 0.15) inset, 0px -1px 4px 0px rgba(5, 5, 5, 0.08) inset;"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 0px 0px rgba(15, 15, 15, 0.15) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08);"; case "tonal": - return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.84);"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset, 0px 0px 0px 2px #FFF inset, 0px 1.5px 0px 0px rgba(0, 0, 0, 0.84);"; case "standard": - return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.30) inset, 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 3px -1px rgba(5, 5, 5, 0.08);"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.40) inset, 0px 0px 0px 2px rgba(166, 166, 166, 0.40) inset, 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 3px -1px rgba(5, 5, 5, 0.08);"; case "primary": - return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(246, 118, 122, 0.50) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.84);"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(246, 118, 122, 0.50) inset, 0px 0px 0px 2px rgba(246, 118, 122, 0.50) inset, 0px 1.5px 0px 0px rgba(0, 0, 0, 0.84);"; + case "brand-outline": + return "0px 0px 0px 1px rgba(243, 78, 95, 0.78) inset, 0px -1px 0px 0px rgba(73, 8, 19, 0.50) inset, 0px 1px 2px -0.5px rgba(73, 8, 19, 0.20);"; } }}; &:hover:not(:disabled) { + transform: ${(props) => { + switch (props.variant) { + case "primary": + case "tonal": + return "translateY(1px)"; + } + }}; box-shadow: ${(props) => { switch (props.variant) { case "primary": return " 0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #ED464F inset;"; case "outline": - return " 0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset;"; + return " 0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 0px 0px rgba(15, 15, 15, 0.15) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08);"; case "standard": - return " 0px 0px 0px 1px rgba(0, 0, 0, 0.84), 0px 1px 1px 0px rgba(235, 235, 235, 0.15) inset;"; + return " 0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.40) inset, 0px 0px 0px 2px rgba(166, 166, 166, 0.40) inset, 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 3px -1px rgba(5, 5, 5, 0.08);"; case "tonal": return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset;"; + case "brand-outline": + return "0px 0px 0px 1px rgba(243, 78, 95, 0.78) inset, 0px -1px 0px 0px rgba(73, 8, 19, 0.50) inset, 0px 1px 2px -0.5px rgba(73, 8, 19, 0.20);"; } }}; background: ${(props) => { @@ -105,6 +125,8 @@ const StyledButton = styled.button` return " #525252"; case "tonal": return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset;"; + case "brand-outline": + return "#FEF3F2"; } }}; } @@ -113,47 +135,19 @@ const StyledButton = styled.button` box-shadow: ${(props) => { switch (props.variant) { case "outline": - return "0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 0px 0px rgba(15, 15, 15, 0.15) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08), 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; case "primary": return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; case "standard": - return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.30) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.30) inset, 0px 0px 0px 2px rgba(166, 166, 166, 0.30) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; case "tonal": return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; + case "brand-outline": + return "0px 0px 0px 1px rgba(243, 78, 95, 0.78) inset, 0px -1px 0px 0px rgba(73, 8, 19, 0.50) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08), 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; } }}; } - /* &:disabled { - color: ${(props) => { - switch (props.variant) { - case "outline": - return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset, 0px 2px 4px -1px rgba(0, 0, 0, 0.22) inset;"; - case "standard": - return "Neutral/400"; - } - }}; - - box-shadow: ${(props) => { - switch (props.variant) { - case "outline": - return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset, 0px 2px 4px -1px rgba(0, 0, 0, 0.22) inset;"; - - case "standard": - return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset;"; - } - }}; - background: ${(props) => { - switch (props.variant) { - case "outline": - return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset, 0px 2px 4px -1px rgba(0, 0, 0, 0.22) inset;"; - - case "standard": - return "hsla(0, 0%, 65%, 1)"; - } - }}; - } */ - &:disabled { color: ${(props) => { switch (props.variant) { @@ -189,11 +183,16 @@ const StyledButton = styled.button` } `; -const TipOnPotlock = ({ variant, onClick, href, ...restProps }) => { +const TipOnPotlock = ({ direction, variant, onClick, href, ...restProps }) => { if (href) { return ( - + { ); } return ( - + { ); }; -const Button = ({ disabled, children, onClick, href, ...restProps }) => { +const Button = ({ direction, disabled, children, onClick, href, ...restProps }) => { if (href) { return ( - + {children} ); } return ( - + {children} ); diff --git a/apps/potlock/widget/Library.jsx b/apps/potlock/widget/Library.jsx index 209ed7d..b49f4ab 100644 --- a/apps/potlock/widget/Library.jsx +++ b/apps/potlock/widget/Library.jsx @@ -83,12 +83,32 @@ const ButtonPreview = ( Tonal +
+
); @@ -100,6 +120,7 @@ const TipOnPotlockPreview = ( + ); @@ -124,8 +145,6 @@ const components = [ embedCode: ` const { Button } = VM.require("potlock.near/widget/Components.ui.Button"); return ( -
-
-
-
);`, }, { From 6194c118c8930cf99e800a06278d7054715b7744 Mon Sep 17 00:00:00 2001 From: Saad Iqbal Date: Sat, 27 Apr 2024 17:38:20 +0500 Subject: [PATCH 5/5] code cleanup --- apps/potlock/widget/Components/Icons.jsx | 6 + .../widget/Components/Icons/Component.jsx | 14 ++ .../widget/Components/Icons/Volunteer.jsx | 16 ++ apps/potlock/widget/Components/ui/Button.jsx | 42 +----- apps/potlock/widget/Library.jsx | 140 +++--------------- 5 files changed, 63 insertions(+), 155 deletions(-) create mode 100644 apps/potlock/widget/Components/Icons.jsx create mode 100644 apps/potlock/widget/Components/Icons/Component.jsx create mode 100644 apps/potlock/widget/Components/Icons/Volunteer.jsx diff --git a/apps/potlock/widget/Components/Icons.jsx b/apps/potlock/widget/Components/Icons.jsx new file mode 100644 index 0000000..d6b1d0a --- /dev/null +++ b/apps/potlock/widget/Components/Icons.jsx @@ -0,0 +1,6 @@ +const { Volunteer } = VM.require("potlock.near/widget/Components.Icons.Volunteer"); +const { Component } = VM.require("potlock.near/widget/Components.Icons.Component"); +return { + Volunteer, + Component, +}; diff --git a/apps/potlock/widget/Components/Icons/Component.jsx b/apps/potlock/widget/Components/Icons/Component.jsx new file mode 100644 index 0000000..89120a0 --- /dev/null +++ b/apps/potlock/widget/Components/Icons/Component.jsx @@ -0,0 +1,14 @@ +const Component = () => { + return ( + + + + ); +}; + +return { Component }; diff --git a/apps/potlock/widget/Components/Icons/Volunteer.jsx b/apps/potlock/widget/Components/Icons/Volunteer.jsx new file mode 100644 index 0000000..93b65e4 --- /dev/null +++ b/apps/potlock/widget/Components/Icons/Volunteer.jsx @@ -0,0 +1,16 @@ +const Volunteer = () => { + return ( + + + + + ); +}; + +return { Volunteer }; diff --git a/apps/potlock/widget/Components/ui/Button.jsx b/apps/potlock/widget/Components/ui/Button.jsx index aa8d503..e2063fd 100644 --- a/apps/potlock/widget/Components/ui/Button.jsx +++ b/apps/potlock/widget/Components/ui/Button.jsx @@ -1,3 +1,7 @@ +const { Volunteer } = VM.require("potlock.near/widget/Components.Icons") || { + Volunteer: () => <>, +}; + const StyledButton = styled.button` all: unset; width: 120px; @@ -20,8 +24,8 @@ const StyledButton = styled.button` font-style: normal; font-weight: 500; line-height: 22px; /* 157.143% */ - - transition: all 50ms ease; + flex-shrink: 0; + transition: all 200ms cubic-bezier(0.17, 0.67, 0.83, 0.67); flex-direction: ${(props) => { if (props.direction === "right") { @@ -193,22 +197,7 @@ const TipOnPotlock = ({ direction, variant, onClick, href, ...restProps }) => { {...restProps} variant={variant ?? "primary"} > - - - - + Tip on Potlock @@ -221,22 +210,7 @@ const TipOnPotlock = ({ direction, variant, onClick, href, ...restProps }) => { {...restProps} variant={variant ?? "primary"} > - - - - + Tip on Potlock ); diff --git a/apps/potlock/widget/Library.jsx b/apps/potlock/widget/Library.jsx index b49f4ab..358b11e 100644 --- a/apps/potlock/widget/Library.jsx +++ b/apps/potlock/widget/Library.jsx @@ -2,108 +2,37 @@ const { Button, TipOnPotlock } = VM.require("potlock.near/widget/Components.ui.B Button: () => <>, TipOnPotlock: () => <>, }; -// states -const [checked, setChecked] = useState(false); + +const { Volunteer, Component } = VM.require("potlock.near/widget/Components.Icons") || { + Volunteer: () => <>, + Component: () => <>, +}; + const ButtonPreview = (
-
+
-
+
@@ -115,7 +44,7 @@ const ButtonPreview = ( const TipOnPotlockPreview = (
-
+
@@ -144,34 +73,16 @@ const components = [ preview: ButtonPreview, embedCode: ` const { Button } = VM.require("potlock.near/widget/Components.ui.Button"); + const { Volunteer } = VM.require("potlock.near/widget/Components.Icons"); + return ( );`, @@ -363,20 +274,7 @@ const renderMenuItem = (c, i) => { res.push(