Merge pull request #17 from storyprotocol/allen/add-direction-license…

…Terms Add direction in licensing terms
storyprotocol · Jun 7, 2024 · 356a3ba · 356a3ba
2 parents df7b9fb + 8a5b941
commit 356a3ba
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 13 deletions.
diff --git a/packages/storykit/src/components/LicenseTerms/LicenseTerms.tsx b/packages/storykit/src/components/LicenseTerms/LicenseTerms.tsx
@@ -74,19 +74,29 @@ const policiesStyles = cva("", {
   },
 })
 
+const directionStyles = cva("", {
+  variants: {
+    direction: {
+      row: "skLicenseTerms--row",
+      column: "skLicenseTerms--col",
+    },
+  },
+})
+
 export type LicenseTermsProps = {
-  size?: "small" | "medium" | "large"
   type: PolicyType
+  direction?: "row" | "column"
+  size?: "small" | "medium" | "large"
 }
 
-function LicenseTerms({ size = "medium", type }: LicenseTermsProps) {
+function LicenseTerms({ type, direction = "column", size = "medium" }: LicenseTermsProps) {
   const iconWidth = size === "small" ? 16 : size === "medium" ? 20 : 24
 
   return (
     <div className={cn("skLicenseTerms", policiesStyles({ size }))}>
-      <div className="skLicenseTerms__properties">
+      <div className={cn("skLicenseTerms__properties", directionStyles({ direction }))}>
         {ShowCans({ type }).length ? (
-          <>
+          <div>
             <div className="skLicenseTerms__item-list-title">Others Can</div>
             <div className="skLicenseTerms__list">
               {ShowCans({ type }).map((can, index) => (
@@ -96,16 +106,18 @@ function LicenseTerms({ size = "medium", type }: LicenseTermsProps) {
                 </div>
               ))}
             </div>
-          </>
+          </div>
         ) : null}
-        <div className="skLicenseTerms__item-list-title">Others Cannot</div>
-        <div className="skLicenseTerms__list">
-          {ShowCannots({ type }).map((can, index) => (
-            <div key={index} className="skLicenseTerms__property skLicenseTerms__property--cannot">
-              <CircleMinus width={iconWidth} />
-              <span>{can}</span>
-            </div>
-          ))}
+        <div>
+          <div className="skLicenseTerms__item-list-title">Others Cannot</div>
+          <div className="skLicenseTerms__list">
+            {ShowCannots({ type }).map((can, index) => (
+              <div key={index} className="skLicenseTerms__property skLicenseTerms__property--cannot">
+                <CircleMinus width={iconWidth} />
+                <span>{can}</span>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </div>

diff --git a/packages/storykit/src/components/LicenseTerms/__docs__/LicenseTerms.stories.tsx b/packages/storykit/src/components/LicenseTerms/__docs__/LicenseTerms.stories.tsx
@@ -25,5 +25,6 @@ export const Select: Story = {
   args: {
     size: "medium",
     type: POLICY_TYPE.COMMERCIAL_REMIX as PolicyType,
+    direction: "column",
   },
 }
diff --git a/packages/storykit/src/components/LicenseTerms/styles.css b/packages/storykit/src/components/LicenseTerms/styles.css
@@ -3,6 +3,14 @@
 
   .skLicenseTerms__properties {
     @apply flex flex-col pt-2 gap-2;
+
+    &.skLicenseTerms--row {
+      @apply flex flex-row;
+    }
+
+    &.skLicenseTerms--col {
+      @apply flex flex-col;
+    }
   }
 
   .skLicenseTerms__item-list-title {